Tooltip

Basic

Add data-stisla-tooltip + data-stisla-tooltip-title to any control and the @stisla/vanilla layer builds the chip, shows it on hover or focus, and positions it with Floating UI (flipping to the opposite side when there's no room). The chip shows after a short hover and tracks the trigger. The demos below are live: hover or tab to a button.

Keyboard

Tooltip activation is tied to focus when focus is in the trigger list (the default). Blurring the trigger closes it.

• Tab: focus the trigger and open the tooltip
• Escape: close the open tooltip without taking focus off the trigger

Placements

data-stisla-tooltip-placement picks the resting side. Floating UI flips it if the chip would overflow the frame; the -start and -end variants align the tooltip to the corresponding edge of the trigger.

Triggers

The default is hover focus, which opens on either. Pass data-stisla-tooltip-trigger to opt for one. manual wires nothing and leaves show() / hide() to a consumer script.

Delay

The 600ms default delay prevents flash on incidental pointer crossings. Drop to 0 for instant feedback or raise it for chips that should only show on deliberate hover.

On a link

Tooltips work on any element. Inline anchors are the common case for jargon, acronyms, or external pointers.

Icon-only triggers

Icon buttons rely on tooltips for their label. Always pair the tooltip with an aria-label on the trigger so screen readers without hover get the same name.

HTML content

Pass data-stisla-tooltip-html="true" to render the title as HTML. Keep it short. Anything beyond a chip or two belongs in a popover.

Long content

Content past --tooltip-max-width wraps. Two lines is the practical ceiling. Anything longer belongs in a popover.

Disabled trigger

Disabled buttons don't fire pointer events, so the tooltip attributes go on a focusable wrapper that takes the hover and focus instead.

Events

Four events fire on the trigger element. The opening and closing events are cancelable.

stisla:tooltip:opening fires before the tooltip appears. Call preventDefault() to keep it hidden.

stisla:tooltip:opened fires once the tooltip is positioned and visible.

stisla:tooltip:closing fires before the tooltip dismisses. Call preventDefault() to keep it open.

stisla:tooltip:closed fires once the tooltip is removed from the DOM.

Customization

These variables retune the chip. Override on the root or any wrapper.