Summary

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

Status

API status: general
Web resource key: com.atlassian.auiplugin:aui-tooltips
AMD Module key: N/A
Experimental API: 5.1
General API: 5.8

Examples

Hover over me

Code

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

Options

Options are set by passing in an options object.

You can override default (200px) max width of the tooltip by setting the maxWidth option:

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 set the tooltip on an element by using selectors even before they are rendered on the page. Once they are added to the page, the tooltip will work with the provided options

Javascript API

You can programatically control visibility of tooltips by passing in the string value "hide" and "show".

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

You can disable tooltips by passing in the string value "disable". You can enable tooltips back by passing in the string value "enable".