jQuery PowerTip

PowerTip is a jQuery plugin created by Steven Benner, that creates hover tooltips that are easy to customize, has APIs for developers, supports adding complex data.

This plugin has some unique features: checks for hover intent (the tooltip doesn’t open the moment your mouse happens to cross an element with a tooltip), tooltip queuing (when the user moves their cursor to another element with a tooltip, the last tooltip will close gracefully before the next one opens).

Features

  • simple configuration;
  • supports static tooltips as well as tooltips that follow the mouse;
  • ability to let users mouse on to the tooltip and interact with their content;
  • easy customization;
  • works with keyboard navigation;
  • smooth fade-ins and fade-outs.

Usage

This plugin requires jQuery 1.7 or later.

To run the plugin you simply use the following code:

$('.tooltip').powerTip(options);
//where options is an object with the various settings you want to override

The content of the tooltip can be set from the HTML title attribute, a HTML5 data attribute, a jQuery object or an element from the DOM.

If you want to change the default options for all tooltips, you can do that using $.fn.powerTip.defaults before you call powerTip(). Here is an example:

$.fn.powerTip.defaults.placement = 'nw'
// change the default tooltip placement to north-west
$('.tooltip').powerTip();

Demo, Documentation & Download

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s