Perfect Tooltip demo

Features

• Only 1 html element (div)!
• Creates a simple tooltip on any html element that matches the given selector (jQuery array)
• 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 can show up on mouse hover (default) or on click
• It hides when you move mouse out of the target (default)
• It can also stay on screen when you move mouse over the tooltip (to allow selecting its text)
• It can show immediately or after a specified delay
• It can have any html content (images, links, etc.)
• When it converts the "title" attribute - whenever the attribute is changed - the tooltip is also updated
• Fully customizable with CSS
• It's jQuery chainable
• It can be attached to the parent element (even body) and if selector is specified - it will work for elements that are added to the page dynamically (after the tooltip was called!)

Demo

Usage

$(function(){
    var html1 = '<h2>Tooltip title</h2><p>Tooltip description</p>',
        html2 = '<h2>Tooltip title</h2><p>A very loong tooltip description text<br> with multiple lines<br>and some links: <a href="#">Link</a></p>';

    $('#button1').tooltip();                                                                        // convert "title" attribute to a tooltip
    $('#button2').tooltip('Button 2 tooltip text');                                                 // show custom text
    $('#button3').tooltip(html1);                                                                   // show html
    $('#button4').tooltip({ position: 'tr', animate: 0 });                                          // position top-right, no animation
    $('#button5').tooltip({ position: 'bl', cls: 'custom-tooltip' });                               // position bottom-left, custom css class
    $('#button6').tooltip({ position: 'r', animate: 1000, text: html1, cls: 'big-tooltip' });       // position right, html content, long animation
    $('#button7').tooltip({ position: 't', trigger: 'click' });                                     // position top, show on click
    $('#button8').tooltip({ position: 't', dontHideOnTooltipHover: true });
    $('#button9').tooltip({ position: 'r', dontHideOnTooltipHover: true, text: html2, cls: 'big-tooltip', showDelay: 1000 });// position left, show with 1000ms delay
    $('#button10').tooltip({ position: 't', dontHideOnTooltipHover: true, text: html2, cls: 'big-tooltip' });
    $('#button11').tooltip({ position: 'lt', dontHideOnTooltipHover: true, text: html2, cls: 'big-tooltip' });
    $('#button12').tooltip({ position: 'lb', dontHideOnTooltipHover: true, text: html2, cls: 'big-tooltip', forcePosition: true });

    $('body').tooltip({ selector: '.lazy' });

    $('body').on('click', '.btn.lazy', function() { $(this).clone().insertAfter(this); });          // clone button on click
});

Download

You can download this project in either zip or tar formats. You can also clone the project with Git by running:

$ git clone git://github.com/tborychowski/perfecttooltip