A lightweight explanation positioned around its trigger. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
tooltip,tooltip-content,tooltip-content--top,tooltip-content--bottom,tooltip-content--inline-start,tooltip-content--inline-end,tooltip-content--motion
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<span class="tooltip">
<button type="button" aria-describedby="help-tip">Help</button>
<span id="help-tip" class="tooltip-content tooltip-content--top"
role="tooltip" data-open>Find guidance here.</span>
</span>Variants and composition
The top, bottom, inline-start, and inline-end modifiers choose logical placement; tooltip-content–motion is optional and must follow the same open state.
Behavior and accessibility
Connect the trigger with aria-describedby. Open on hover and focus, close on Escape, and keep the explanation non-interactive; use a popover/dialog for controls.
Reference
See the interactive Storybook specimen. Continue to Tree or return to the Official preset overview.