Skip to content

Instantly share code, notes, and snippets.

@rmontagud
Created October 6, 2009 11:03
Show Gist options
  • Save rmontagud/202926 to your computer and use it in GitHub Desktop.
Save rmontagud/202926 to your computer and use it in GitHub Desktop.
Tiny jQuery tooltip
// Credit goes to Ashley Ford, since the idea of this snippet
// was taken from his blog article at http://papermashup.com/experimental-jquery-tooltips/
// this is a "self-sustained" tooltip, and i stripped the AJAX
// part since i don't need it for now
$(document).ready(function() {
// Tooltip, probando
$("[rel^='tooltip']").bind('mouseover', function(){
var theMessage = "Tooltip: "+$(this).attr('rel').split(":", 2).slice(1, 2);
$('<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,
'background-color' : 'silver',
'font-size' : 'smaller',
'width' : '300px',
'position' : 'absolute'
});
});
}).bind('mouseout', function(){
$('div.tooltip').fadeOut('fast', function(){
$(this).remove();
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment