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 = ‘

‘+text+’

‘;
$(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]

Total Communications Awareness
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]

You may also read:  How to use custom post type archive as front page

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.

Leave a Reply