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).
- 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.
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();