UI components · Feedback
Tooltip
Also called: Hover tip, Hint, Info tip, Hover text
A short piece of dark explanatory text that pops up next to an element on mouse hover or keyboard focus and disappears when you move away.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstAdd tooltips to the icon-only buttons in the toolbar. After hovering for 300ms, show a dark gray label with white text above the button, like "Edit," "Delete," or "Export," in 12px with a small arrow pointing at the button. Show it on keyboard focus too, and hide it when the mouse leaves or Esc is pressed. When it's near the edge of the screen, flip it to the other side automatically.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Tooltip is what you need.
Use Tooltip when
- Icon-only buttons that need to tell users what they do
- Text truncated with an ellipsis for lack of space, where users hover to see the full content
- A question mark icon next to a form field or data metric that needs a short extra explanation
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Putting a "View details" link or button inside a tooltip, which disappears as soon as the mouse moves toward it, so it can never be clicked
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Adding a tooltip with exactly the same text to a button that already has a clear text label
- 03
Stuffing several long paragraphs into a tooltip, so it becomes a big block covering the content below
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A trigger element and a small overlay that appears on hover. The overlay holds a sentence or two of plain text and a small arrow pointing at the trigger.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A tooltip is a tiny overlay that appears when users hover over an element or focus it with the keyboard. It's usually white text on a dark background with a small arrow pointing at the target, and it disappears when the mouse moves away. It's most often used to explain icon-only buttons, like showing "Edit" over a pencil icon, or to show the full text of something that's been truncated.
It only holds a sentence or two of short plain text. It can't hold interactive content like buttons, links, or images, because it vanishes as soon as the mouse moves off and users can't click anything in it. When you need more content or actions, use a popover, which opens on click and can hold richer content.
Phones have no hover, so tooltips are basically invisible on touchscreens. Don't hide key information only in a tooltip.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-tooltip- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
[role="tooltip"].tooltip.ant-tooltip.el-popper.is-dark[class*="MuiTooltip-tooltip"].arco-tooltip.t-tooltip[data-slot="tooltip-content"]
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026