jQuery clueTip Plugin Revisited Demo

Quite some time back I wrote about using the jQuery clueTip plugin to display additional data to the users of my application. At that time I only scratched the surface of what the clueTip plugin can do though by using the text within an item’s title attribute. The plugin also supports displaying data retrieved through an Ajax call as well as the data from another item on the page.

In this demo I am going to show how to display local data when an icon is hovered over.

End Product:

To start with, be sure to add the jQuery and clueTip scripts to your project as well as the css file for the clueTips.

jQuery:

Html Markup:

So, when the page is ready, a clueTip is added to each image. The image contains an attribute “rel” which tells the plugin which data from the page to display when the image is hovered over. The title attribute of the image is used as the header of the popup.

Stay tuned. I plan on looking into loading the clueTip’s data through an Ajax call. Be sure to checkout the demo and let me know in the comments what can be improved.