Tooltip

Tooltips show brief supplementary text on hover or focus. In Nuxt / PLAI use UTooltip.

Element	Source
Trigger buttons	See Button variants
Tooltip panel (dark fill)	Nuxt UI inverted neutral
Focus ring on trigger	CI link blue

Live examples

Export Soft trigger Nuxt UI

? Ghost trigger Nuxt UI

Hover or focus the buttons to show positioned tooltips.

HTML

<span class="ci-tooltip">
  <button type="button" aria-describedby="tip-export">Export</button>
  <span id="tip-export" class="ci-tooltip__content" role="tooltip" hidden
    >Download case as PDF</span
  >
</span>

JavaScript (reference)

pattern-behaviors.js shows the tooltip on mouseenter / focusin and positions it above the trigger using getBoundingClientRect(). Production apps should use UTooltip with equivalent show/hide and aria-describedby wiring.

Accessibility

• Trigger must be keyboard-focusable.
• Connect trigger and tooltip via aria-describedby (tooltip id).
• Tooltips are supplementary — never hide required labels inside them.
• Do not put interactive content in tooltips.

Related patterns

• Button — common tooltip triggers
• Link — prefer visible text over tooltips for links