component
Tooltip
A brief text label shown on hover or keyboard focus that names or explains the element it points at, and carries nothing you can interact with.
A tooltip names things. It is the caption an icon-only button never got, which is why the best ones are two or three words long and read like a label rather than a sentence.
Everything hard about tooltips follows from being hover-triggered. Hover does not exist on touch, and it does not exist for keyboard users, so a tooltip must also appear on focus, and anything it says must be available another way. Never put a control inside one: if the pointer has to travel to reach it, the tooltip has already closed. That is a popover.
Delay matters more than it looks. Showing instantly turns a toolbar into a flickering mess as the pointer crosses it; a short delay before showing (and a shorter one before hiding) is what makes the pattern feel considered.
Which word?
| If you want | say |
|---|---|
| a label that names the control under the pointer | tooltip |
| a small anchored surface with controls inside it | popover |
| a rich preview that opens on hover, not on click | hover card |
| a hint you click open, not hover open | toggletip |
| extra detail that should follow the name, not replace it | accessible description |
| judging whether a tooltip or flyout behaves | hoverable, dismissible, persistent |
Related
Contains: Popover arrow
See also: Hover intent · Coach mark
Implementations
Specimens illustrate the concept; for production use, start here.
| aria-apg | Tooltip |
| material | Tooltips |
| radix | Tooltip |
| base-ui | Tooltip |