Tooltip
You might say
When someone hovers over this icon, show a short label explaining what it does.
Explain a compact control with a short text labelA tooltip gives a brief label or hint for an icon or unfamiliar control. It should appear on keyboard focus as well as hover and must not contain essential instructions. If the content is longer or interactive, use a Popover.
Know first
You can say this to an AI Agent
Add a Download report tooltip to the icon, opening on hover and keyboard focus and closing on leave or blur. Keep format choices and errors outside it, and verify the action remains understandable on touch.
When to use it
- Label an icon-only buttonSettings
- Expand an abbreviated term2026-product-plan-final-v3-final.sketch 2026-product-plan-final-v3…
- Give a short hint for an unfamiliar controlMargin uses EBITDA: earnings before interest, taxes, depreciation, and amortizationEBITDA as its basis.
- Show the full value of truncated textTasks Calendar days from creation to deliveryCycle time ⓘSign-in page6 days
When NOT to use it
- Hide required instructions inside a tooltipThere is no hover on mobile, so this hint never appears.
- Put links or forms inside itNotification settings Manage preferences →
- Repeat a label that is already visibleHintHintHintHintHint
- Support hover only and ignore keyboard or touchEmailRequiredThe required rule is hidden in a tooltip until submit fails.
Anatomy
Copy link
⧉
Small dark strips containing only plain text
Points to the triggering element, indicating which element the prompt is associated with
Supports hover, keyboard focus or touch screen operation triggering
Variants
Top
Settings⚙
Default orientation, use it first if there is space above
Bottom
★Collection
When elements are close to the top of the page, they are displayed downwards first.
Left
Download⬇
The element is close to the right edge, so the bubble is placed to the left so that it will not be clipped.
Right
✎Edit
The element is closer to the left edge, so the bubble is placed to the right so that it will not be clipped.
Typical use cases
Toolbar icon
Save to cloud
✎⬆⬇⋯
Abbreviation
2026-Summer Marketing Plan-final-v3.pptx
📄 2026-Summer Marketing Plan-fin…
Truncated filename
Total transaction volume: the sum of all order amounts within the statistical period
This quarter GMV The year-on-year growth was 32%, mainly contributed by new products.
Chart label
Conversion rate = number of orders placed ÷ number of visitors, calculated on a daily basis
DateVisitsConversion rate ⓘ
Tooltip vs Popover: which one should you use?
Use a Tooltip for a short, read-only explanation. Use a Popover for longer information or controls people need to interact with.
| Decision point | Tooltip | Popover |
|---|---|---|
| Content scope | One short label or hint. | Longer information, links, buttons, or form controls. |
| Interactivity | Read-only and available on keyboard focus as well as hover. | Can remain open while someone clicks or types inside it. |
| Best fit | Explaining an icon button, truncated title, or abbreviation. | Showing contextual details, a small set of options, or a compact form. |
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check