Clone wiki

tooltips / Home

ToolTips

ToolTips is a Javascript script to create tooltips using local or remote data using AJAX. It can create tooltips for any kind of element. It requires MooTools >= 1.2 and Tips from MooTools More.

Features

ToolTips features are:

  • Dead simple to use
  • Uses local or remote data
  • Creates multiple instances
  • Fully customizable
  • Works on Safari, Firefox, IE 6/7, Chrome and Opera
  • Documentation generated with PDoc
  • Open source, full code is available on BitBucket

Download

  • Full code is available from BitBucket. If you want to fix bugs or add features, it's the best way to start with
  • Full code is also available from a zip file

When the sources are retrieved you can build a compressed version of the lib using :

$ rake

It'll build a YUI compressed version of the lib in 'dist' directory. You'll also got HTML code documentation in 'doc' directory.

Usage Example

Drop mootools, mootools Tip and tooltips.js in your javascripts directory and include it in your XHTML layout :

<script src="javascripts/mootools.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/mootools-more.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/tooltips.js" type="text/javascript" charset="utf-8"></script>

then you can create new ToolTips instances :

new Bounga.ToolTips();
new Bounga.ToolTips('span.my_tooltips');
new Bounga.ToolTips('.tooltips', {showDelay: 0, hideDelay: 200});
new Bounga.ToolTips('.tooltips', {url: '/definitions/'});
new Bounga.ToolTips('.tooltips', {onShow: function() { alert('Here is the tooltip') }});

by default, ToolTips creates tooltips for elements which have 'tooltip' CSS class applied.

Take a look at 'example' directory to see examples.

Options

Available options to tune your ToolTips are:

url: null       // URL used to retrieve a tooltip text based on an associated tooltip title attribute using AJAX.
                // When using local data, title attribute is used for tooltip title and href attribute is used for
                // tooltip content. You can use a rel attribute to overwrite this content.
showDelay: 100  // Delay to apply before showing the tooltip
hideDelay: 100  // Delay to apply before hiding the tooltip
className: null // CSS class for tooltip container
offsets: { x : 16, y : 16 } // The distance between your tooltip and the mouse
fixed: false    // If set to true, the toolTip will not follow the mouse
onShow: null    // Function which is fired when the tooltip is shown
onHide: null    // Function which is fired when the tooltip is being hidden

Other

If you want to contribute you should take a look at:

Problems, comments, and suggestions are welcome on the ticket system.

Copyright (c) 2009 Nicolas Cavigneaux, released under the MIT license

Updated