Overlays · §5.26

Tooltip

Supplementary names for icons and shortcuts.

Theme
Contrast
Language
Motion
Text size

Code

<Tooltip><TooltipTrigger render={<Button aria-label="Print" />} /><TooltipContent>Print</TooltipContent></Tooltip>

Accessibility

  • 400 ms delay; also on keyboard focus; never the only place information lives.

Usage

Do

  • Name icon buttons.

Don't

  • No tooltips on touch-only controls.

Platforms

Web
apps/web/components/ui/tooltip.tsx, apps/web/components/ui/kbd.tsx
iOS
SwiftUI .help
Android
Compose PlainTooltip