Tooltip

Summary

A small dark hint shown near an element on hover and keyboard focus. Replaces AUI's jQuery-tipsy wrapper with a zero-dependency implementation. The text comes from the element's title attribute (moved aside on bind so the native browser tooltip doesn't double up), a custom string, or a generator function.

While visible, the trigger gets aria-describedby pointing at the role="tooltip" element, and Esc dismisses it.

Examples

Hover and pause (500 ms delay, AUI's default) or Tab through the buttons (keyboard focus shows immediately). Clicking hides the tooltip, AUI's hideOnClick behavior: activating a control suppresses its hint until the pointer leaves and returns.

HTML (auto-init)

<button class="neura-button" data-neura-tooltip title="Saves your changes">Save</button>
<button class="neura-button" data-neura-tooltip="top" title="Appears above">…</button>

JavaScript API

const tip = Neura.tooltip('#el', {
  placement: 'bottom',   // top | bottom | left | right | auto
  title: 'Custom text',  // string or fn(el) => string; default: title attr
  delayIn: 500,          // AUI's default show delay
  delayOut: 0,
  html: false,           // trusted content only
});
tip.show(); tip.hide(); tip.destroy();

The target may be an element, an array of elements, or a selector matching any number of elements. There is one instance per element (repeat calls return the existing ones), and the return value is a single instance or an array accordingly. placement: 'auto' shows below unless the trigger sits in the bottom third of the viewport; under dir="rtl", left/right are logical (inline-start/-end) and swap physical sides. The tooltip clamps to the viewport, and show() is a no-op when the resolved text is empty. The original title text is stashed in data-neura-original-title on bind and restored by destroy().

CSS classes

Class	Effect
`.neura-tooltip`	The tooltip element: rendered by JS and appended to `<body>`, not authored manually.
`.neura-tooltip-top` / `-bottom` / `-left` / `-right`	Placement modifier set per show; puts the arrow on the edge facing the trigger.

AUI compatibility

The shim registers tipsy's jQuery surface; gravity maps to placement (n→bottom, s→top, e→left, w→right, function gravities→auto):

AJS.$('.header-icon').tooltip({ gravity: 'n' });
AJS.$('.cell').tooltip({ title: 'data-description', delayIn: 200 });