ToolTip 1.03

This is yet another ToolTip class for MooTools 1.3

It doesn't do any magic, but provides a few useful tools for integrating various widgets into tooltips. I'll give some examples below, which would be the best way to show the most convenient usage, followed by API docs.


Korney Czukowski
Current version
GitHub Issues



  • _self_/_current_:
    • core/1.3: [Class, Options, Events, Element, Element.Event]
    • more/1.3: [Element.Position, Element.Shortcuts, Locale]

How to use

Using ToolTip on its own

Display <abbr> titles as tooltips:

document.getElements('abbr[title]').addEvent('click', function() {
    ToolTip.instance(this, this.get('title')).show();

Display an Element as tooltip content; including an option to prevent tooltip autohide:

ToolTip.instance('input#site-url'), {autohide: false}, new Element('div').adopt(
    document.newTextNode('Enter your site '),
    new Element('abbr[html="URL"][title="Uniform Resource Locator"]'),
    document.newTextNode(' here')

Display tooltip to show Request progress:

var toolTip = ToolTip.instance('button#submit-form'), {autohide: false});
new Request({
    data: data,
    onFailure: function() {
        toolTip.set('Oops, something\'s happened, your data were not saved').show();
    onRequest: function() {
        toolTip.set(new Element('p').adopt(
            document.newTextNode('Your data are being sent to server, please be patinet'),
            new Element('br'),
            new Element('img[alt="Progress bar"][src="progress.gif"])
    onSuccess: function() {
        toolTip.options.autohide = true;
        toolTip.set('Your data have been saved').show();
    url: url

Using ToolTip with other widgets

You may want to apply some matching CSS to these widgets to display them as tooltips. Also note, that these examples are not complete and may need some tweaking to use in your own application. On the other hand, you can see live demo on ToolTip's demo page.

The whole idea is to use widgets' own positioning functions (i.e. they position themselves) and add an arrow to them, that points to input or any other element of your choise. There may be a problem with draggable widgets, where arrow would not be moved with the element. The solution would be to hack into drag events to show hide and/or reposition the arrow.

Use with Christopher Beloch's mooRainbow color picker and display it as tooltip:

Screenshot 1

var colorPicker = new MooRainbow(element, options);
colorPicker.arrow = ToolTip.arrow({
    'relativeTo': colorPicker.layout.getElement('div[class$="box"]'),
    'position': 'topLeft',
    'edge': 'right',
    'offset': {y: 16}
    'hide': function() {
    'show': function() {;

Use with Arian Stolwijk's DatePicker plugin and display it as tooltip:

Screenshot 2

var datePicker = new Picker.Date(element, options).attach([label, icon]);;
datePicker.arrow = ToolTip.arrow({
    'relativeTo': datePicker.picker,
    'position': 'topLeft',
    'edge': 'right',
    'offset': {y: 16}
    'show': function() {
        this.position(element, this.options.pickerPosition);;
    'hide': function() {
    'select': function(date) {
        input.set('value', date.format('db'));
        label.set('html', date.format(this.options.labelDateFormat));



Initializes ToolTip instance and creates tooltip arrow, depending on tooltip position options.

Accepted parameters:

  • Element - ToolTip owner
  • object (optional) - Constructor options:
    • autohide: boolean, hides tooltip after mouse pointer is away from tooltip and its owner element for over hideDelay ms; default: true,
    • offset: number, defines how far away is the tooltip from its owner element; default: 12,
    • hideDelay: number, delay until tooltip is hidden; default: 1000,
    • parseURLs: boolean, automatically parse URLs and make them links in ToolTip.set(string) calls
    • position: object, similar options as for Element.position:
      • edge: string, default: 'bottom',
      • position: string, default: 'centerTop',
      • offset: object:
        • x: number, default: 0,
        • y: number, default: 0
      • text: string, text to set as content at initialization time; default: null



Fires, when tooltip was shown.


Fires, when tooltip was hidden.

Class methods


Sets tooltip content. Accepts string or Element as a parameter. Calls position() afterwards. If a parameter is string and parseURLs option is enabled, the URLs in text will be converted to links.


Shows tooltip, if not already shown.


Hides tooltip.


Repositions tooltip. This is a convenience method and there's no need to call it externally.

Static methods


Creates ToolTip instance or retrieves it, if already created. This is a preferred way to call ToolTip.

Accepted parameters:

  • Element - ToolTip owner element
  • object (optional) - Constructor options, see above
  • string or Element (optional) - ToolTip content

Note: 2nd and 3rd parameters may be passed in reverse order, i.e. it doesn't matter whether you call ToolTip.instance(element, options, content) or ToolTip.instance(element, content, options).


Creates CSS arrow and sets its position options.

Accepted parameters:

  • object - Constructor options, contains similar position options as for ToolTip constructor, plus distance parameter
  • Element (optional) - position relative to this element, alternatively may be set using options object


Returns default arrow position from position options of toolip element. It actually calculates distance parameter from position offset, resets offsets and inverts edge and position parameters.


Converts text email addresses and anchors into links. Existing links will not be altered. This function has been ported from Kohana Framework (see Text::auto_link()) and hopefully RegEx are still working properly after being ported to Javascript.



A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus