jQuery Tooltip text
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function(){
$('[rel=tooltip]').bind('mouseover', function(){
var theMessage = $(this).attr('content');
$('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
$(this).bind('mousemove', function(e){
$('div.tooltip').css({
'top': e.pageY - ($('div.tooltip').height() / 2) - 5,
'left': e.pageX + 15
});
});
}).bind('mouseout', function(){
$('div.tooltip').fadeOut('fast', function(){
$(this).remove();
});
});
});
</script>
<style>
.tooltip{
position:absolute;
width:250px;
background-image:url(tip-bg.png);
background-position:left center;
color:#FFF;
padding:5px 5px 5px 18px;
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
}
.tooltip span{font-weight:700;
color:#ffea00;
}
</style>
<a href="#" alt="Text Tooltip" rel="tooltip" content="<span>Text Title</span><br/> This is an example of a text tooltip">Text Tooltip</a>
