Documentation

Tooltips

Code snippetsDesign guidelines

Summary

Tooltips can describe a UI element in a little bit more detail when users deliberately hover on an element.

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";
    }
});