Simplest JQuery ToolTips

Well I think I may have developed the simplest tooltips possible using JQuery. Everything out there seemed too fancy and took too much space, so I just whipped up something super simple. All you need is the amazing JQuery library, this javascript method:

$(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!