Tooltip
工具提示
Aliases:提示气泡悬浮提示气泡提示悬停提示小黑框提示title 提示鼠标放上去显示的小提示
What is it
A small text bubble that appears briefly on hover, explaining icon buttons, abbreviations or truncated text. Purely informational and non-interactive, it disappears on mouse leave; usually shows after a ~300ms delay to avoid flicker while moving across the screen.
Name disambiguation
A tooltip is a brief hover/focus hint. A popover is interactive. A label is a persistent form tag. Tooltips must not hold interactions or essential info.
Interactive playground
Try it. Make an informed choice.Hover or focus the trigger to view supporting text.
Loading lab…
What to look for
- 01Supplement labels rather than hide essential instructions.
- 02Expose the same hint on keyboard focus, not only hover.
✓ When to use
- Icon-only buttons need a text label
- Truncated text needs to reveal the full value
- Explain non-critical jargon or shortcuts
✕ When not to use
- The info must stay readable — use visible text or a help popover
- Touch devices have no hover — disable it or use long-press
- Interactive elements inside — use a popover instead
Variants
Dark
深色气泡
Light text on dark bubble, the common desktop default
Light
浅色卡片
Bordered and shadowed, carries a bit more
Rich
富提示
Title, shortcuts or icons, still non-interactive
Implementation
position: absolutepointer-events: nonez-indextransitionTrigger is relative, the bubble absolute and offset per placement; delay the show by 300–500ms and hide immediately on leave. pointer-events: none on the bubble prevents flicker; also show on focus for keyboard access (aria-describedby). Provide a touch fallback or omit it on touch devices.
Platform API
role="tooltip"aria-describedbyIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
Related concepts
A non-modal layer that pops up beside its trigger on click, carrying medium-complex content such as text, a mini-form or a date picker. No backdrop and no blocking of the rest of the page; clicking outside or pressing Esc closes it.
ComponentsSimilarA dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
ComponentsSimilarA small message bar that appears in a viewport corner and dismisses itself, reporting an operation result (saved, copied, upload done). Non-blocking, usually with one action (undo, view), lingering for about 3–5 seconds before fading out.
ComponentsSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsSimilarNot to be confused with
A popover opens on click and is interactive; a tooltip shows on hover and is read-only.
Toast is system feedback that auto-dismisses; a tooltip explains a control near the pointer.