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]
A VBS campaign to help you understand the benefits of adopting a Fixed Mobile Convergence approach in your local market and explain the requirements needed to adopt this approach.
[/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.