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

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

• Tips requires the page to be in Standards Mode.

• Events, Options

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

• 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-title.
• 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.

• show: fires when the tip is shown; passed the tip dom element
• hide: fires when the tip is being hidden; passed the tip dom element

<a href="http://mootools.net" title="mootools homepage" class="thisisatooltip" />

var myTips = new Tips('.thisisatooltip');

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

onShow(tip)

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.

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.

onHide(tip)

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.

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

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

myTips.attach(elements);

1. elements - (mixed) A collection of elements, a string Selector, or an Element to apply the tooltips to.

• (object) This Tips instance.

myTips.attach('a.thisisatip');

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

myTips.detach(elements);

1. elements - (mixed) A collection of elements, a string Selector, or an Element to apply the tooltips to.

• (object) This Tips instance.

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.

<a id="tip1" href="http://mootools.net" title="mootools homepage" class="thisisatooltip" />

$('tip1').store('tip:title', 'custom title for tip 1');

$('tip1').store('tip:text', 'custom text for tip 1');

If you use tips storage you can use elements and / or html as tips title and text.