Easiest way to create tooltip using jQuery

This is a very easy way to create tooltip using jQuery. This tooltip is shown on “mouseover” event, but you can customize it.

First, add latest jQuery into head tag in your html.

[html]

[/html]

Then insert the following code:
[html]

$(document).ready(function() {

$(‘.baloon’).mouseover(function() {
text = $(this).children(‘span’).html();
html = ‘

‘;
$(this).append(html);
})
.mouseout(function() {
$(‘.tooltip’).remove();
}) ;

});

[/html]

Insert these css lines into your stylesheet:
[css]
div.tooltip{
width:226px;
position:absolute;
top:33px;
left:10px;
z-index:100;
line-height:120%;
text-align:left;
font-weight:bold;
}

div.tooltip_top{
width:100%;
height:14px;
background:url(../images/tooltip_top.png) no-repeat;
}

div.tooltip_bottom{
width:100%;
height:7px;
background:url(../images/tooltip_bottom.png) no-repeat;
}

div.tooltip_body{
padding:0 5px;
background:url(../images/tooltip_body.png) repeat-y;
}

#your_id{

width:100px;

height:35px;

position:relative;

}

#your_id span{display:none;}
[/css]

Now the html:
[html]

[/html]

So, just put the class “baloon” in your tag in which you want to use tooltip. And within this tag set a span tag and write the tooltip text within that span tag.

That’s it. Mouseover on the tag and get your tooltip !

Thanks.