⚠️ Tooltip

Updated 2026-05-19

Confidence anatomy medium variants high motion high a11y high content low

Anatomy

1
Trigger
the element that opens the overlay; retains focus return on close
2
Surface
the overlay panel itself — modal dialog, drawer, popover, tooltip
3
Scrim (optional)
dimmed backdrop used for modals + drawers; absent for popovers/tooltips
4
Header (optional)
title + close affordance for dismissible overlays
5
Body
the overlay's primary content
6
Footer (optional)
action affordances — confirm/cancel/close
7
Arrow or pointer (optional)
anchors popovers/tooltips to their trigger

Type
`Default`

modals fade + scale; scrim cross-fades

drawer-side-panel slides on axis with easing per the drawer pattern

popover/tooltip anchor open at the trigger with origin transform