Simple Tooltip for multiple rows

There are many, many jQuery tooltip plugins out there, and some of them are very good. But when someone on the jQuery Google Group asked (a year ago) which plugin could handle displaying tooltips for 2,000 links on a page, I wasn't able to find one. So, I decided to throw together a quick little plugin myself and was surprised by how easy it was.

Javascript:



$('<div id="livetip"></div>').hide().appendTo('body');
var tipTitle = '';

$('a').live('mouseover', function(event) {
  var $link = $(this);

  tipTitle = this.title;
  this.title = '';
  $('#livetip')
  .css({
    top: event.pageY + 12,
    left: event.pageX + 12
  })
  .html('<div>' + tipTitle + '</div><div>' + this.href + '</div>')
  .show();
}).live('mouseout', function(event) {
  this.title = tipTitle;
  $('#livetip').hide();
});


This script does the following:

Creates a single tooltip element that will be shown and hidden as the user mouses over links (line 1)
Hides the tooltip and appends it to the body (line 1)

Changes the tooltip's contents according to the moused-over link's title and href attributes (lines 7 and 14)
Places the tooltip on the page 12px below and to the right of the cursor position at the time that it entered the link (lines 9–13)

Shows the tooltip (line 15)
Sets the link's title attribute to an empty string when the user mouses over the link; this prevents the browser's default tooltip from appearing (line 8)

Sets the link's title back to what it was originally and hides the tooltip when the user mouses out of the link (lines 16–19)

A Little Style

At minimum, the tooltip needs to have the position: absolute style declaration for it to be positioned correctly on the page, but I threw in a little extra CSS to make it look more appealing:

CSS:
#livetip {
position: absolute;  
background-color: #cfc;  
border: 2px solid #c9c;  
border-radius: 4px;  
-webkit-border-radius: 4px;  
-moz-border-radius: 4px;
}

Typically I like to include live demos directly in the blog entry, 

but since this one involves 2,000 links, I've set up separate demo pages. 

Check out the tooltip demo using .live(), or download the zip.

A Little Less Simple, A Little More Speedy

Using .live() in this way avoids binding event handlers directly to the thousands 

of links on the page. However, it doesn't prevent jQuery from searching the entire 

document for all of those links. After all, I'm still using the $('a') jQuery 

function. Also, at least for now, .live() binds events to document, forcing event 

bubbling all the way up the DOM each time. If there is a noticeable performance 

lag when the script is initially executed, it may help to use custom event 

delegation.

Using custom event delegation, I bind the events to a containing table element:

Javascript:

$('<div id="livetip"></div>').hide().appendTo('body');

var tipTitle = '';

$('#mytable').bind('mouseover', function(event) {

  var $link = $(event.target).closest('a');

  if ($link.length) {

    var link = $link[0];

    tipTitle = link.title;

    link.title = '';

    $('#livetip')

    .css({

      top: event.pageY + 12,

      left: event.pageX + 12

    })

    .html('<div>' + tipTitle + '</div><div>' + link.href + '</div>')

    .show();

  }

}).bind('mouseout', function(event) {

  var $link = $(event.target).closest('a');

  if ($link.length) {

    $link.attr('title', tipTitle);

    $('#livetip').hide();

  }

});

Note the use of .bind() instead of .live() and event.target instead of this. 
I could have used the .mouseover() and .mouseout() shortcut methods, 
but since I used .live() in the first example, it was easier to simply replace 
"live" with "bind." Also, you may be wondering why I used mouseover / mouseout 
when I could have used mouseenter / mouseleave or even the .hover() method 
(which uses mouseenter and mouseleave internally). The reason is that mouseenter 
and mouseleave prevent the event bubbling that this script relies on for its event 
delegation. Those two events would be triggered only when the mouse enters or 
leaves the full table, while mouseover and mouseout are triggered whenever the 
mouse enters or leaves any of the table's descendant elements, as well.


View the demo using custom event delegation, or download the zip.


Tags : Jquery, Html Tooltip, Php, Javascript