Static HTML
Show the tooltip right away.
$('#my').et('<p>Hello World</p>');
Show on click.
$('#my').et('<p>Hello World</p>', 'click');
Default Content
Embed the element with id elementID into the bubble.
<a id="my" href="#elementID">Link</a>
$('#my').et();
Open the iframe with the link inside the bubble.
<a id="my" href="http://google.com">Link</a>
$('#my').et();
Display linked image inside the bubble.
<a id="my" href="./myimage.png">Link</a>
$('#my').et();
Display the title text.
<abbr id="my" title="My Title">Link</abbr>
$('#my').et();
Generated Content
Per-image tooltip text using the
title attribute on mouse hover and callback. In fact this
is the default behavior if no content or callback is provided.
$('img[title]').et(function() {return $('<div></div>').text($(this).attr('title'));}, 'hover');
Commands
$('#my').et('hide');
$('#my').et('show');
$('#my').et('align');
"Radio" tooltips - showing one hides the others from the same group.
$('img.i1').et('click', {group: 'myGroup1'});
$('img.i2').et('click', {group: 'myGroup1 myGroup2'});
$('img.i3').et('click', {group: 'myGroup2'});
Timed
Hide the tooltip automatically after 3 secons.
$('#my').et('<p>Hello world!</p>', 3000);
$('#my').et('<p>Hello world!</p>', {duration: 3000});
Positioning
$('#my').et({position: "top", align: "start"});
Position Hinting
<div class="etBottom etCenter">
<a href="./my.png">Icon</a>
<a href="./my2.png" class="etAuto">Icon</a>
</div>
<script type="text/javascript">$('a').et('hover');</script>
Default Settings
$.fn.et('defaults', {look: 'light', className: 'bubble'});
$.fn.et('defaults', 'hover', 5000); // default method is hover for 5s
