Skip to content

Instantly share code, notes, and snippets.

@geeksunny
Created July 12, 2013 17:39
Show Gist options
  • Save geeksunny/5986271 to your computer and use it in GitHub Desktop.
Save geeksunny/5986271 to your computer and use it in GitHub Desktop.
A simple jQuery-based tooltip solution.
$('.tooltip')
.mouseenter(function(e) {
e.preventDefault();
pos = $(this).offset();
$(this).append('<div class="tooltip">'+$(this).attr('rel')+'</div>');
div = $('div.tooltip',$(this));
div.attr('top',pos['top']+5).attr('left',pos['left']).fadeIn(200);
})
.mouseleave(function(e) {
e.preventDefault();
$('div.tooltip',$(this)).fadeOut(200,function() {
$(this).remove();
});
})
.click(function(e) {
e.preventDefault();
})
;
/* Example usage:
*
* <a href="#" class="tooltip" rel="Tooltip text/HTML content.">Hover here for tooltip.</a>
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment