Display a tip on any element with a title and/or href.
Credits:
Note:
Implements:
Arguments:
- elements - (mixed: optional) A collection of elements, a string Selector, or an Element to apply the tooltips to.
- options - (object) An object to customize this Tips instance.
Options:
- showDelay - (number: defaults to 100) The delay the show event is fired.
- hideDelay - (number: defaults to 100) The delay the hide hide is fired.
- title - (string|function: defaults to title) The property of the element to be used for the tip-title. If this option is a function it will execute it on every element with it passed as the first argument. It uses the return value of this function as the tip-title
- text - (string|function) Behaves the same as the
title option but for tip-title. By default it either uses the rel or the href attribute as tip-text.
- className - (string: defaults to null) the className your tooltip container will get. Useful for extreme styling.
- The tooltip element inside the tooltip container above will have 'tip' as classname.
- The title will have as classname: tip-title
- The text will have as classname: tip-text
- offset - (object: defaults to {'x': 16, 'y': 16}) The distance of your tooltip from the mouse.
- fixed - (boolean: defaults to false) If set to true, the toolTip will not follow the mouse.
Events:
- onShow - (function: defaults to
function(tip, hovered){ tip.setStyle('display', 'block'); }) The default function for the show event, passes the tip element and the currently hovered element.
- onHide - (function: defaults to
function(tip, hovered){ tip.setStyle('display', 'none'); }) The default function for the hide event, passes the currently hovered element.
- onAttach - (function) Fires when an element gets added to the tips instance. Passes the element as argument.
- onDetach - (function) Fires when the event listeners get removed from an element. Passes the element as argument.
Example:
HTML:
<a href="http://mootools.net" title="mootools homepage" class="thisisatooltip" />
JavaScript
var myTips = new Tips('.thisisatooltip');
- (function) Fires when the Tip is starting to show and by default sets the tip visible.
Signature:
onShow(tip)
Arguments:
- tip - (element) The tip element. Useful if you want to apply effects to it.
- el - (element) The element on which the tip is based on.
Example:
myTips.addEvent('show', function(tip, el){
tip.fade('in');
});
- (function) Fires when the Tip is starting to hide and by default sets the tip hidden.
Signature:
onHide(tip)
Arguments:
- tip - (element) The tip element. Useful if you want to apply effects to it.
- el - (element) The element on which the tip is based on.
Example:
myTips.addEvent('hide', function(tip, el){
tip.fade('out');
});
Attaches tooltips to elements. Useful to add more elements to a tips instance.
Syntax:
myTips.attach(elements);
Arguments:
- elements - (mixed) A collection of elements, a string Selector, or an Element to apply the tooltips to.
Returns:
- (object) This Tips instance.
Example:
myTips.attach('a.thisisatip');
Detaches tooltips from elements. Useful to remove elements from a tips instance.
Syntax:
myTips.detach(elements);
Arguments:
- elements - (mixed) A collection of elements, a string Selector, or an Element to apply the tooltips to.
Returns:
- (object) This Tips instance.
Example:
myTips.detach('a.thisisatip');
<div class="options.className"> //the className you pass in options will be assigned here.
<div class="tip-top"></div> //useful for styling
<div class="tip">
<div class="tip-title"></div>
<div class="tip-text"></div>
</div>
<div class="tip-bottom"></div> //useful for styling
</div>
You can also assign tips titles and contents via Element Storage.
Example:
HTML:
<a id="tip1" href="http://mootools.net" title="mootools homepage" class="thisisatooltip" />
JavaScript
$('tip1').store('tip:title', 'custom title for tip 1');
$('tip1').store('tip:text', 'custom text for tip 1');
Note:
If you use tips storage you can use elements and / or html as tips title and text.