the compact javascript framework
in partnership with mediatemple
Tooltips, BubbleTips, whatever they are, they will appear on mouseover
MIT-style license.
The idea behind Tips.js is based on Bubble Tooltips (http://web-graphics.com/mtarchive/001717.php) by Alessandro Fulcitiniti http://web-graphics.com
Display a tip on any element with a title and/or href.
Tips requires an XHTML doctype.
elements | a collection of elements to apply the tooltips to on mouseover. |
options | an object. See options Below. |
maxTitleChars | the maximum number of characters to display in the title of the tip. defaults to 30. |
showDelay | the delay the onShow method is called. (defaults to 100 ms) |
hideDelay | the delay the onHide method is called. (defaults to 100 ms) |
className | the 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
offsets | the distance of your tooltip from the mouse. an Object with x/y properties. |
fixed | if set to true, the toolTip will not follow the mouse. |
onShow | optionally you can alter the default onShow behaviour with this option (like displaying a fade in effect); |
onHide | optionally you can alter the default onHide behaviour with this option (like displaying a fade out effect); |
<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>
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