Tooltip TL |
Tooltip T |
Tooltip TR |
||
Tooltip LT |
Tooltip |
Tooltip RT |
||
Tooltip L |
Tooltip R |
|||
Tooltip LB |
Tooltip RB |
|||
Tooltip BL |
Tooltip B |
Tooltip BR |
$(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 });
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