Tooltip
A small hint shown on hover or focus. Non-interactive by design — it cannot hold buttons or links, and its content must never be the only way to reach information.
Purpose
A tooltip explains a control whose meaning is not obvious — most often an icon-only button. The
root layout already provides the app-wide TooltipProvider, so you only compose the three parts
below.
If the content is interactive, use Popover: focus cannot enter a tooltip.
Hint
Best practices
Do
- Keep it to one short phrase.
- Give the icon button its own
aria-labelas well — the tooltip is not a substitute.
Don't
- Put a link or button inside; focus cannot reach it.
- Hide information that a person needs in order to complete the task.
Accessibility & keyboard
- Opens on hover and on keyboard focus, so it is not mouse-only.
- Keyboard: Tab to the trigger to show; Esc dismisses.
Every Tooltip part and prop in Storybook
Dropdown menuDraft
A list of actions triggered from a button. Group related items under a label, separate groups with a rule, and mark irreversible actions as destructive.
CommandDraft
A searchable command palette for finding and running actions from the keyboard. Group results by area and show the shortcut alongside anything that has one.