The Perfect Tooltip – a jQuery tooltip plugin

Perfect Tooltip is a jQuery Plugin to create tooltips on any HTML element. Interesting features included.

Customizable jQuery tooltip plugin

The Perfect Tooltip is a plugin with many configuration options and interesting features:

– Creates a simple tooltip on any html element that matches the given selector (jQuery array)

– Only one HTML element (div)

– It can either convert a “data-title” or a “title” attribute of the element or add a user-defined text

– It is only added to the DOM when required (visible)

– It will automatically adjust its position to stay on screen (unless forcePosition is true)

– It can be set to the one of the 12 different positions relatively to the target

– It hides when you move mouse out of the target (default)

– It can show immediately or after a specified delay

– When it converts the “title” attribute – whenever the attribute is changed – the tooltip is also updated

And others! It is also fully customizable with CSS and jQuery chainable.

jQuery Perfect Tooltip example
jQuery Perfect Tooltip example

Usage

Install via Bower:

bower install perfect-tooltip

Basic tooltip:

$(function() {
    $('#button1').tooltip(); // convert "title" attribute
    $('#button2').tooltip('My label'); // show custom text
});

License: MIT

Demo:

http://tborychowski.github.io/perfecttooltip

GitHub:

https://github.com/tborychowski/perfecttooltip

See also:

Tooltips? Try nice and clean gips tooltips

iPicture – tooltip your photos

Hint.css – pure CSS tooltips for your projects

qTip2 – jQuery advanced tooltips plugin

jQuery add pin to image plugin – tooltip photos with jquery.easypin

Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1