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

Аргументы:

• 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.
• 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
• offsets - (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:

• show: fires when the tip is shown
• hide: fires when the tip is being hidden

Пример:

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)

Аргументы:

1. tip - (element) The tip element. Useful if you want to apply effects to it.

Пример:

myTips.addEvent('show', function(tip){

    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)

Аргументы:

1. tip - (element) The tip element. Useful if you want to apply effects to it.

Пример:

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

});

Tips Method: attach

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

Tips Method: detach

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

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.

Пример:

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.