Component · Overlay · 33
Tooltip
Tooltip = a dark chip 6px from its trigger that explains an icon; it holds no links and never takes focus.
Archive prompt
⌘A
Naming an icon button
What is a Tooltip?
A tooltip names something the icon cannot. Name the placement, the delay, and the rule that nothing lives inside it.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
Anatomy
These are the parts to name in your prompt.
- 01 Trigger
- 02 Chip
- 03 Arrow
- 04 Text
When to use
- Naming icon-only buttons in a toolbar
- Showing the keyboard shortcut next to an action
- Explaining a disabled control's reason
Avoid when
- The text holds a link or a button — use Popover
- The content is longer than two short lines
- Touch is the primary input — there is no hover
Nothing interactive goes inside a tooltip — the pointer cannot reach a link living in a chip that vanishes on hover.
See also
Anti-patterns
Animate from scale(0)→ Create a tooltip component.
STYLE
- dark chip #1D1D1F, 12px white text, 6px radius, 6px from the trigger
- a 4px arrow points back at the trigger center
- max width 200px, text wraps to two lines then truncates
- a shortcut hint sits right-aligned in #8E8E93
STATES
- hidden, 400ms hover delay, visible, dismissed on pointer leave
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui