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 label·A 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

Button

⚙Settings

★Collection

⬇Download

When to use it

Label an icon-only button
Settings⚙★⬇
Expand an abbreviated term
2026-product-plan-final-v3-final.sketch 2026-product-plan-final-v3…
Give a short hint for an unfamiliar control
Margin uses EBITDA: earnings before interest, taxes, depreciation, and amortizationEBITDA as its basis.
Show the full value of truncated text
Tasks Calendar days from creation to deliveryCycle time ⓘ
Sign-in page6 days

When NOT to use it

Hide required instructions inside a tooltip
⚙There is no hover on mobile, so this hint never appears.
Put links or forms inside it
Notification settings Manage preferences →🔔
Repeat a label that is already visible
Hint⚙Hint★Hint⬇Hint✎Hint☰
Support hover only and ignore keyboard or touch
EmailRequired
The 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 ⓘ