Class: Tips

Display a tip on any element with a title and/or href.

Credits:

• The idea behind Tips.js is based on Bubble Tooltips by Alessandro Fulcitiniti

Note:

• Tips requires the page to be in Standards Mode.

Implements:

• Events, Options

Tips Method: constructor

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.
• windowPadding - (object; defaults to {'x':0, 'y': 0}) Allows you to reduce or expand the virtual size of the window for tip positioning. The tips will not be allowed to approach the edge of the window on any side based on this offset.

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');

Tips Event: show

• (function) Fires when the Tip is starting to show and by default sets the tip visible.

Signature:

onShow(tip)

Arguments:

1. tip - (element) The tip element. Useful if you want to apply effects to it.
2. el - (element) The element on which the tip is based on.

Example:

myTips.addEvent('show', function(tip, el){
    tip.fade('in');
});

Tips Event: hide

• (function) Fires when the Tip is starting to hide and by default sets the tip hidden.

Signature:

onHide(tip)

Arguments:

1. tip - (element) The tip element. Useful if you want to apply effects to it.
2. el - (element) The element on which the tip is based on.

Example:

myTips.addEvent('hide', function(tip, el){
    tip.fade('out');
});

Tips Method: attach

Attaches tooltips to elements. Useful to add more elements to a tips instance.

Syntax:

myTips.attach(elements);

Arguments:

1. 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');

Tips Method: detach

Detaches tooltips from elements. Useful to remove elements from a tips instance.

Syntax:

myTips.detach(elements);

Arguments:

1. 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');

Tips HTML Structure

<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>

Tips with storage

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.