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.


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


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

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


For more information see [Project homepage](

Problems, comments, and suggestions are welcome on the [ticket system](

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