Ajax Tooltip with jQuery

The application is very person centric, so we wanted an easy way to pop up a “tooltip” with more information about a person whenever you see a person’s name. For example, here are some search results. When you hover over a name, more information appears.

This is very much based on the Coda Popup Bubble example for jQuery that’s been going around with a few important differences:

1. The information is requested via AJAX, so you don’t have to include all of this extra information in a hidden div. This keeps your markup smaller for grids with tons of names in it.
2. When you mouse over another name, the previous one will disappear. If you tried this with the original Coda example, you’d end up with a weird streaking animation since there’s a delay before the div is hidden.
3. Works in IE (just turned off the fade animation)

Note that this requires jQuery 1.3.1. I found out that the new .live() functionality is very useful for ajax applications. Previously, if you bind a handler at startup, it will apply to elements that currently exist. The new live() functionality makes it to where you can apply events to elements that are created in the future. This means I can create a new link via ajax and it will still work with the hover tooltip.  Find Source Code Here