Installation & Basic Usage
In order to use Elixon Tooltip you have to include the core jQuery library, jquery.tooltip.min.js and jquery.tooltip.css.
Example:
<link type="text/css" rel="stylesheet" href="./jquery.tooltip.css" />
<script type="text/javascript" src="./jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="./jquery.tooltip.min.js"></script>
The typical usage example:
$('#myImage').et('<p>Click to enlarge.</p>', 'hover');
If you want to embed the whole existing form into a bubble attached to a button on click:
$('button').et('form.myForm', 'click');
Syntax
Standard call
jQuery.et([action,] [toggle,] [content,] [options,] [generator,] [duration]);
Setting up defaults
$.fn.et('defaults', [DEFAULTS]);
Parameters
- action:
string - show, hide, align
- toggle:
string - toggle event name: click, hover, focus, blur
- content:
mixed - HTML content or jQuery selector or jQuery object to display existing HTML inside the tooltip
- generator:
function(element) - call back function to return the content dynamically.
- duration:
number - display the tooltip for specified amount of milliseconds - default: 0 (no timeout)
- options:
{} - any of following options
- method:
string - see above
- content:
mixed - see above
- generator:
function - see above
- look:
string - any class name to attach onto .et element. Current CSS supports by default dark, yellow, blue, sand, green, red, box. You are free to add your own CSS - refer to Appearance section for more details.
- fx:
mixed - existing effect name show, fade, slide or callback function(settings:{}, show:bool) providing custom effect.
- position:
string - auto, top, right, bottom, left
- align:
string - auto, start, center, end
- className:
string - addition CSS class names to add onto .et element
- toggle:
string - see above
- group:
string - white-space separated list of group names. Only one tooltip from each group can be visible at a time.
- duration:
number - see above
Custom Effects
You can write your own special effect you the inbuilt
show, fade, slide effects
are not enough for you.
Example:
var myFX=function(settings, show) {
var $attachedTo=$(this).data('etSrc');
var $tooltip=$(this);
$attachedTo.css('border', show ? '1px solid red' : 'none');
if (show) {
$tooltip.fadeIn();
} else {
$tooltip.fadeOut();
}
};
// Call with custom FX
$('#my').et('<h1>Hello world!</h1>', {fx: myFX});
Position Hints
Very often happens that you want to hove more control over the
bubble position. Although Elixon Tooltip has smart automatic
positioning inbuilt and you can control the position individually
for each bubble you may happen to need for example that all bubbles
inside a table face right while all bubbles inside the header
face down.
To indicate the desired bubble position add the
etBottom, etTop, etRight,
etLeft, etStart,
etCenter, etEnd class names to a
HTML block. All bubbles attached to any element inside this block will
honour these position hints.
Example:
<table class="etRight">
...
</table>
<script type="text/javascript">
// will face right and will by default automaticaly
// display the 'title' attribute text on mouse 'hover'
$('table td').et('hover');
// Same as
$('table td').et('hover', {position: 'right'});
</script>
Use etAuto class name to cancel the hinting
inherited from a parent element for all bubbles attached to
descendant elements of the element having the etAuto
class name.
Finding Tooltips & Source Elements
The object that the Tooltip is attached to is stored in a data
property etSrc on a bubble's div.et element.
var $sourceElement=$('.et:first').data('etSrc');
If you need to find bubble's div.et element then check
the et property on the element the bubble is attached to.
var $bubbleElement=$sourceElement.data('et');
