Tooltips

Summary

An optional component providing spin.js, a highly customisable javascript spinner. Note this is a separate component from the simple wait icon included in AUI Icons.

Status

API status:	experimental
Included in AUI core?	Not in core You must explicitly require the web resource key.
Web resource key:	`com.atlassian.auiplugin:aui-experimental-tooltips`
Experimental since:	5.1

Examples

Code

Markup

<a id="simple-tooltip" href="http://example.com/" title="This is a simple tooltip">tooltip</a>

Javascript

AJS.$("#simple-tooltip").tooltip();

Calling .tooltip() will create a tipsy tooltip with ADG style and default options applied.

Options

Options are set by passing in an options object.

You can control the direction/positioning of the tooltip by setting the "gravity" option:

AJS.$('#north').tooltip({gravity: 'n'});
AJS.$('#south').tooltip({gravity: 's'});
AJS.$('#east').tooltip({gravity: 'e'});
AJS.$('#west').tooltip({gravity: 'w'});
AJS.$('#north-west').tooltip({gravity: 'nw'});
AJS.$('#north-east').tooltip({gravity: 'ne'});
AJS.$('#south-west').tooltip({gravity: 'sw'});
AJS.$('#south-east').tooltip({gravity: 'se'});

The text of the tooltip can be set arbitrarily:

AJS.$('#custom-tooltip').tooltip({
    title: function () {
        var index = AJS.$("a").index(this);
        return "This is link number " + index + " in all of the page";
    }
});

AUI uses a forked copy of Tipsy, which adds things like ARIA support. See https://github.com/sebr/tipsy for details.
For a list of core tipsy options, see http://onehackoranother.com/projects/jquery/tipsy/