Tooltip

Short hover and focus hint linked with aria-describedby — not title.

Preview

Live

<span class="ui-tooltip">
  <button type="button" class="btn btn-primary ui-tooltip__trigger"
    aria-describedby="tip-save">Save draft</button>
  <span id="tip-save" role="tooltip" class="ui-tooltip__content"
    data-side="top" hidden>Saves the tailored packet locally.</span>
</span>

Variants

Top

data-side="top" — default placement above the trigger.

Appears above

Bottom

data-side="bottom" — placement below the trigger.

Appears below

Accessibility

  • Content uses role="tooltip" and is linked with aria-describedby while open — avoid native title.
  • Show on hover and keyboard focus; Escape dismisses.
  • Tooltips supplement labels — never hide required instructions in hover-only content.
  • Keep copy short; critical actions need a visible label, not only a tip.
  • Default show delay is 400ms in React to reduce accidental reveals.

API

HTML classes

Class Description
.ui-tooltip Positioning root.
.ui-tooltip__trigger Hover / focus target wrapper or element.
.ui-tooltip__content Tooltip bubble; use data-side and hidden.

React props

From src/core/Tooltip.tsx.

Prop Type Default Description
content ReactNode — Accessible tooltip text (required).
delay number 400 Show delay in milliseconds.
side 'top' | 'bottom' 'top' Placement relative to the trigger.
asChild boolean false Merge listeners onto a single child instead of a span wrapper.
id string auto Id for the tooltip content element.
className string — Merged onto the root.