$(document).ready(function(){enableTooltips(verticalOffset, horizontalOffset)}) // Set these values how you like, I used 35, 0
function enableTooltips(topOffset, leftOffset)
{
$('[tooltipText]').bind(
{
mouseover: function() {
if ($('#tooltip').length == 0)
$('body').append('')
var o = $(this).offset()
o.top += topOffset;o.left += leftOffset
$('#tooltip').css(o).html($(this).attr('tooltipText'))
.stop(true).animate({n:0},1000).fadeTo(300,1)
.animate({n:0},5000).fadeTo(500,0)
},
mouseout: function() {
$('#tooltip').stop(true).animate({nothing:0},500).fadeTo(500,0)
}
});
}
And some css like this:
#tooltip {
font:normal 12px Verdanna, Arial, Helvetica, sans-serif;
position: absolute;
z-index: 1000;
border: 1px solid #111;
background-color: #eee;
padding: 2px;
opacity: 0;
filter:alpha(opacity=0);
}
On the items you want tooltips just put a tooltipText property like this:
<input type="submit" src="ButtonHome.gif" tooltiptext="Go to home">
and you win! JQuery is amazing!
0 comments:
Post a Comment