Tips.js

Tooltips, BubbleTips, whatever they are, they will appear on mouseover

License

MIT-style license.

Credits

The idea behind Tips.js is based on Bubble Tooltips (http://web-graphics.com/mtarchive/001717.php) by Alessandro Fulcitiniti http://web-graphics.com

Summary
Tips.jsTooltips, BubbleTips, whatever they are, they will appear on mouseover
TipsDisplay a tip on any element with a title and/or href.

Tips

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

Note

Tips requires an XHTML doctype.

Arguments

elementsa collection of elements to apply the tooltips to on mouseover.
optionsan object.  See options Below.

Options

maxTitleCharsthe maximum number of characters to display in the title of the tip. defaults to 30.
showDelaythe delay the onShow method is called.  (defaults to 100 ms)
hideDelaythe delay the onHide method is called.  (defaults to 100 ms)
classNamethe prefix for your tooltip classNames. defaults to ‘tool’.

the whole tooltip will have as classname: tool-tip

the title will have as classname: tool-title

the text will have as classname: tool-text

offsetsthe distance of your tooltip from the mouse. an Object with x/y properties.
fixedif set to true, the toolTip will not follow the mouse.

Events

onShowoptionally you can alter the default onShow behaviour with this option (like displaying a fade in effect);
onHideoptionally you can alter the default onHide behaviour with this option (like displaying a fade out effect);

Example

<img src="/images/i.png" title="The body of the tooltip is stored in the title" class="toolTipImg"/>
<script>
    var myTips = new Tips($$('.toolTipImg'), {
        maxTitleChars: 50   //I like my captions a little long
    });
</script>

Note

The title of the element will always be used as the tooltip body.  If you put :: on your title, the text before :: will become the tooltip title.

Documentation by Aaron Newton & Mootools Developers, generated by NaturalDocs and GeSHi