The Yahoo UI Library provides a nifty helper for creating tooltips. I started playing around with it when I wanted to add the same tooltip to a large number of elements on a page. What got me interested in this implementation, is the ability to use the same tooltip on a number of elements, rather than having each element have it’s own tooltip div, or implementation.
The tooltip library creates a div element for each tooltip when the document loads. I wanted to use the tooltip to display a larger version of an image when a user hovered their mouse over a thumbnail. I did not however want to load all the full sized images when the page loads.
I decided the best way to handle this task was to implement my own tooltip function and create my own panel. Continue reading