Tooltip
文字提示
A small line of text that appears on hover, telling you what an unfamiliar icon actually does.
Live Demo
Actually clickableWhat you just saw:Hover an unfamiliar icon and a small dark bar reading "Export as PDF" floats out beside it — that is a tooltip.
What it actually is
A tooltip does exactly one thing: it names and explains. It cannot hold buttons (that is a popover) and it cannot carry a critical action. Its biggest limitation is that touch devices can barely trigger it, so it can never be the only place information lives.
Anatomy · What it's made of
Trigger触发元素
Usually focusable
Bubble气泡
Dark background, white text, border-radius 6px
Text文字
≤2 lines, never a long sentence
Arrow小箭头
Points at the trigger element
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| An icon button is not self-explanatory and needs a label | Yes |
| A number or an acronym needs a gloss | Yes |
| Truncated text needs a way to read the whole thing | Yes |
| Users need to click a button inside it | No |
| It holds information required to understand the page | No |
Tooltips are basically untriggerable on mobile, so critical information needs a second, permanent home.
Keep the delay short (around 500ms), or the whole page feels sluggish.
Similar Patterns
Don't mix these upTooltipCurrent
文字提示
A small line of text that appears on hover, telling you what an unfamiliar icon actually does.
Popover
浮出层
A small panel that pops out next to a particular element, visually tethered to the thing that opened it.
In one line:A small line of text that appears on hover, telling you what an unfamiliar icon actually does.
Popover
浮出层
A small panel that pops out next to a particular element, visually tethered to the thing that opened it.
Icon Button
图标按钮
A button with only an icon and no text, which is only meaningful when paired with a tooltip.
Inline Validation
即时校验
Tell the user while they type whether the value is right, instead of waiting until they submit.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a tooltip to the icon buttons in a toolbar: after a 400ms hover, show the name of the icon; hide it immediately on mouse-out or Esc, and also show it on keyboard focus.
Don't just say this to AI
Bad → BetterDon't say this to AI
Show a hint when the mouse goes over it.
Say this instead
Add a tooltip to the icon button: appear after a 400ms hover showing the icon name, hide immediately on mouse-out or Esc, trigger on keyboard focus too, add aria-describedby, flip below automatically near the top of the screen, and keep the text ≤2 lines.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.