AخA
<a id="simple-tooltip" href="http://example.com/" title="This is a simple tooltip">tooltip</a>AJS.$("#simple-tooltip").tooltip();Tooltips can describe a UI element in a little bit more detail when users deliberately hover on an element.
| 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-tooltips
|
| AMD Module key: | N/A |
| Experimental API: | 5.1 |
| General API: | 5.8 |
<a id="simple-tooltip" href="http://example.com/" title="This is a simple tooltip">tooltip</a>AJS.$("#simple-tooltip").tooltip();Calling .tooltip() will create a tipsy tooltip with ADG style and default options applied.
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"; }});<a id="custom-tooltip" href="http://example.com/">Custom tooltip</a>
You can unbind and remove tooltips by passing in the string value "destroy".
Tooltips bound using the live option cannot be destroyed.
AJS.$('#custom-tooltip').tooltip('destroy');