Tooltip
A small label that appears next to an element on hover or keyboard focus, to name an icon or add one short fact. It holds text only and disappears when the pointer or focus leaves.
Preview
Hover or tab to a button
When to use
- To name an icon-only button: Copy, Archive, More actions.
- To show a keyboard shortcut or a truncated value in full.
- For one short fact that helps but is not needed to finish the task.
Reach for something else
- For anything interactive — links, buttons, form fields — or longer content: that is a Popover.
- For information someone must read to succeed, such as a field's format: put it on the page as help text.
Anatomy
- 1
Trigger
The element the tip describes; it keeps its own focus and hit area.
- 2
Bubble
Dark or light surface, 8px radius, a short line of text.
- 3
Arrow
A small notch pointing back at the trigger.
States
Hidden
At rest; nothing is drawn.
Shown
After a short hover delay, or at once on keyboard focus.
Placement
Top, right, bottom or left; flips to the opposite side when there is no room.
Dark and light
Dark reads on most surfaces; light suits dark pages and dense charts.
Accessibility
- The bubble has role="tooltip" and the trigger points to it with aria-describedby, or uses it as its accessible name when the trigger is icon-only.
- It appears on keyboard focus as well as hover, and Escape hides it without moving focus.
- Moving the pointer onto the tooltip keeps it open, so it can be read at high zoom.
Source
The Tooltip is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.