Tooltips

Ask a question Design guidelines

Summary

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

Status

API status: general
Included in AUI core? Not in core You must explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:aui-experimental-tooltips
AMD Module key: N/A
Experimental since: 5.1
General API status: 5.8

Examples

Hover over me

Code

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:

The text of the tooltip can be set arbitrarily:

You can unbind and remove tooltips by passing in the string value "destroy". Tooltips bound using the live option cannot be destroyed.