MooTooltips - JavaScript tooltips with MooTools 1.2

MooTooltips - JavaScript tooltips with MooTools 1.2

MooTooltips is a tooltip plugin developed for MooTools 1.2.1. It can display tooltip messages from HTML elements, Ajax calls or text added manually. Tooltip parameters can be passed either when instantiating the class or on the rel element parameter. If for example you want to set on an anchor a tooltip taken from an HTML element, on that anchor you have to set: rel="{content:'id of the element holding the tooltip content'}" and you're done. Hover over the bolded text to see an example.

By default tooltips appear below the hovered element and are not sticky. If you need to set the tooltip to stick and appear above the hovered element, you need to set two more parameters. Here's an example: rel="{content:'id of the element holding the tooltip content', sticky:true, position:-1}".
You can set in the same class instance different behaviour for each tooltip you set.

For form elements ( you need to trigger the tooltip on focus instead of mouse over ), set on the element the parameter focus to true.

The script gives you the possibility to display tooltips either by passing the parameters on the element rel parameter or by setting them manually when instanciating the class. When creating a class instance, you can set both types, inline tips and manually set ones.
To add extra tolltips not specified in the element rel, you need to pass it some values in the extra parameter.

For every new tooltip you want to add as extra, you'll need to pass:

  • the id of the element displaying the tooltip ( using the id parameter )
  • the content of the tooltip; this can come:
    • from an HTML element(you pass the id of that element using the content parameter) OR
    • some text you want to enter ( you pass it in the text parameter ) OR
    • using AJAX calls ( you pass the url to the ajax parameter )
  • the position of the tooltip: 1 - below the element, -1 - above the element ( using the position parameter )
  • sticky or not ( using the sticky parameter )


Extra element with AJAX call. Move mouse here.

This tip displays content from a hidden div. See it in action.

Here we have a simple text element to display the tooltip. It displays the tooltip on a remote element.

Element added extra. Hover over here.


Brown-throated Three-toed Sloth
The living sloths comprise six species of medium-sized mammals that live in Central and South America belonging to the families Megalonychidae and Bradypodidae, part of the order Pilosa. The sloth's taxonomic suborder is Folivora, while some call it Phyllophaga. Both names mean "leaf-eaters".
Hey, I'm remote. Neat!
I'm the remote display element. Here's where the tooltip will appear if you hover the orange text.
Quick links: Have you found this useful? Support it by donating.