Perfect Tooltip - A Jquery plugin to show tooltip

<div class="buttons">
	<button class="btn btn-primary" id="button1" title="Button 1 tooltip text">default position, convert title to tooltip</button>
	<button class="btn btn-danger" id="button2">default position, custom text</button>
	<button class="btn btn-info" id="button3">default position, html tooltip</button>
	<button class="btn btn-inverse" id="button4" title="On the top-right">position top-right with no animation</button>
	<button class="btn btn-warning" id="button5" title="On the bottom-left">position bottom-left, custom css class</button>
	<button class="btn btn-danger" id="button6" title="On the right">position right, html content, long animation</button>
	<button class="btn btn-info" id="button7" title="On the top, show on click">position top, show on click</button>
	<button class="btn btn-success" id="button8" title="On the top, dont hide on tooltip hover">position top, don't hide when hovering the tooltip</button>
	<button class="btn btn-primary" id="button9" title="On the right, show with delay">position right, show with 1000ms delay</button>
	<button class="btn btn-inverse" id="button10">position top, html content, don't hide on tooltip hover</button>
	<button class="btn btn-success" id="button11">position left-top, html content</button>
	<button class="btn btn-warning" id="button12">position left-bottom, html content, force position</button>
	<button class="btn btn-large lazy" data-title="added to body">added to "body" (click the button to clone)</button>
</div>


<table class="test-table">
	<tr>
		<td></td>
		<td><div class="tooltip tooltip-t tooltip-tl">Tooltip TL</div></td>
		<td><div class="tooltip tooltip-t           ">Tooltip T </div></td>
		<td><div class="tooltip tooltip-t tooltip-tr">Tooltip TR</div></td>
		<td></td>
	</tr>
	<tr>
		<td><div class="tooltip tooltip-l tooltip-lt">Tooltip LT</div></td>
		<td colspan="3" rowspan="3"><div class="tooltip">Tooltip</div></td>
		<td><div class="tooltip tooltip-r tooltip-rt">Tooltip RT</div></td>
	</tr>
	<tr>
		<td><div class="tooltip tooltip-l">Tooltip L</div></td>
		<td><div class="tooltip tooltip-r">Tooltip R</div></td>
	</tr>
	<tr>
		<td><div class="tooltip tooltip-l tooltip-lb">Tooltip LB</div></td>
		<td><div class="tooltip tooltip-r tooltip-rb">Tooltip RB</div></td>
	</tr>
	<tr>
		<td></td>
		<td><div class="tooltip tooltip-b tooltip-bl">Tooltip BL</div></td>
		<td><div class="tooltip tooltip-b           ">Tooltip B </div></td>
		<td><div class="tooltip tooltip-b tooltip-br">Tooltip BR</div></td>
		<td></td>
	</tr>
</table>

body { margin:0; padding: 20px; background: #f0f0f0; font: 90% helvetica, arial, sans-serif; line-height: 1.6; }
h1 { font-size: 1.5em; margin: 0; }
h2 { font-size: 1.3em; margin: 20px 0 10px 0; }
ul { font-size: .9em; line-height: 1.5; margin: 0 0 0 20px; }
ul li { margin: 0 0 5px 0; }
.download { float: right; margin-right: 20px; }
.footer { text-align:center; padding-top:30px; font-style: italic; }

.buttons { margin: 20px;  }
.buttons button { margin: 15px; }
.custom-tooltip { background: orange; border-radius: 3px; color: #000; box-shadow: 0 2px 5px 3px rgba(0,0,0,0.4); font-weight: normal; font-size: 14px; padding: 5px 15px; }
.custom-tooltip:before { border-color: orange;  } /* tip color */

.big-tooltip { text-align: left; padding: 10px 18px; font-weight: normal; }
.big-tooltip h2 { color: #fff; margin: 0 0 5px; }
.big-tooltip p { color: #eee; margin: 0; line-height: 1.4; }
.big-tooltip p a { color: #ccc; text-decoration: underline; }
.big-tooltip p a:hover { text-decoration: none; }
pre { background: #fff; }



.test-table { border-collapse: collapse; margin: 30px; }
.test-table td { border: 1px solid #ccc; padding: 20px; }
.test-table .tt-wrapper { position: relative; }
.test-table .tooltip { position: relative; }

$(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
});