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 = ‘ ‘+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; […]

Continue Reading

You may also like