Simple javascript tooltip or help text

Hi,

In this post I will discuss of a custom made tooltip which you can implement in your HTML, without breaking a sweat. As usual, in this also, I am using jQuery as my Javascript framework. I have used the basic concept of generating lightbox to generate the tooltips. So lets see how it looks in the front end:

Before we go into the explanation you can download the source code from here.

Code and Explanation:

First let us see the basic HTML structure as:

<div style="float:left;margin-right:5px">This is text 1 </div><div class="tooltip">This is tooltip 1...</div><br/>

<div style="float:left;margin-right:5px">This is text 2 </div><div class="tooltip">This is tooltip 2...</div><br/>

<div style="float:left;margin-right:5px">This is text 3 </div><div class="tooltip">This is tooltip 3...</div><br/>

<div style="float:left;margin-right:5px">This is text 4 </div><div class="tooltip">This is tooltip 4...</div><br/>

The basic idea is very simple, whatever the tooltip will be we have to put it into a div with class as "tooltip" as follows:

<div class="tooltip">This is tooltip 1...</div>

This is all that needs to be done from design prospective. The rest of the task is done by my custom js, "tooltip.js". Now lets see what does that js do.

First I am navigating through all the <div> which has class "tooltip" by:

jQuery('.tooltip').each(function(){

........

........

........

})

Now I fetch the content or the actual tooltip that needs to be displayed by:

content=jQuery(this).html();

Now I replace the content of each <div class="tooltip"> with the actual HTML of the tooltip with the "content" that I have stored in the above line as:

jQuery(this).html('<div class="tip_text">'+content+'</div>');

This <div class="tip_text"> is generating the following:

Last but not the least, I implement the mouseover and mouseout effect on each of the tooltip by:

jQuery(this).mousemove(function(){

jQuery(this).find(".tip_text").show();

})

jQuery(this).mouseout(function(){

jQuery(this).find(".tip_text").hide();

})

So my final code is as:

jQuery('.tooltip').each(function(){

content=jQuery(this).html();

jQuery(this).html('<div class="tip_text">'+content+'</div>');

jQuery(this).mousemove(function(){

jQuery(this).find(".tip_text").show();

})

jQuery(this).mouseout(function(){

jQuery(this).find(".tip_text").hide();

})

})

If you want to change the design of the tooltip all you need to change is this line:

jQuery(this).html('<div class="tip_text">'+content+'</div>');

and its corresponding class. This is checked in FF, IE, Chrome and Safari. Hope it helps.

Download: tooltip.zip