Creating Image Preview Tooltips with the YUI Overlay Widget

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 “Creating Image Preview Tooltips with the YUI Overlay Widget”