Archive for December, 2009

Using setTimeout to Delay Showing Event-Delegation Tooltips

In my Jan Aagaard asked how we might go about enhancing the script by adding a small delay before showing a tooltip. The answer lies with two JavaScript functions, setTimeout() and clearTimeout().

Read the rest of this entry »

Binding Multiple Events to Reduce Redundancy with Event-Delegation Tooltips

Last time I showed how to use event delegation to create a simple tooltip for a huge number of elements without running into the problem of binding an event handler to all of those elements. In this tutorial, I’m going to refine that tooltip script a bit, avoiding some code repetition and fixing a bug that someone pointed out in a comment.

Read the rest of this entry »

Simple Tooltip for Huge Number of Elements

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.

Event Delegation, Again

The key to having JavaScript handle hundreds, or even thousands, of elements on a page is to use event delegation. As Louis-Rémi Babé described in Working with Events, Part 3: More Event Delegation with jQuery, jQuery’s .live() method makes event delegation dead easy. A simple tooltip script using .live() might look something like this:

Read the rest of this entry »