For Designer

Components/Feedback

Tooltip

Tooltips put a name or a short hint next to an element, only when people hover or focus it

Variants
72
Types
2
Arrows
9

Playground

Pick a type and an arrow. The arrow always points at the trigger, so the tooltip opens on the other side

Tooltip · Type=Default · Arrow=Bottom Center · Size=Small · Dark=true

Types

Default names a control in a few words. Description adds a title, a sentence and an optional icon and close

DefaultCopy link
DescriptionShareable linkAnyone with this link can view the file. Turn it off in Share settings.

Arrows

Nine positions. Pick the one that points at the trigger and keeps the tooltip inside the screen

NoTooltip
Top LeftTooltip
Top CenterTooltip
Top RightTooltip
Bottom LeftTooltip
Bottom CenterTooltip
Bottom RightTooltip
LeftTooltip
RightTooltip

Dark and light

Dark is the default and stands out on any page. Light suits dark surfaces and image backgrounds

DarkShareable linkAnyone with this link can view the file. Turn it off in Share settings.
LightShareable linkAnyone with this link can view the file. Turn it off in Share settings.

Behavior

Hover a trigger for 300 ms, or tab to it. Press Escape or move away to hide it

Icon buttonCopy link
ShortcutAdd a comment C
Explain a fieldWorkspace IDShare it with support so they can find your workspace faster.

When to use

Use when

  1. An icon button has no visible label
  2. A short hint helps, like a keyboard shortcut or a field’s format
  3. Text is cut off and people may want to read all of it

Avoid when

  1. The information is needed to finish the task, show it on the page
  2. It holds links, buttons or forms, use a Popover
  3. On touch screens, where there’s no hover, rely on visible labels

Do and don’t

Bold ⌘B
Do

Keep it to a few words that add something, like the action and its shortcut

Click this button to make the selected text bold so it stands out
Don’t

Don’t repeat the visible label, or squeeze a paragraph into a Default tooltip

Tokens and specs

PropertyTokenValue
Dark fill#262626
Dark text#FFFFFF
Dark description#FFFFFF 88%
Light fill#FFFFFF
Light text#5C5C5C, title text/strong-950
Light shadow—0 2 8 −8, #000000 20%
Default, Small—Inter Regular 12/16, 4 / 8 padding, radius 6
Default, Large—Inter Regular 14/20, 6 / 10 padding, radius 6
Description width—268 / 284 px
Description padding12 px, radius 10 / 12
Description title—Inter Medium 12/16, 14/20 at Large
Description text—Inter Regular 10/12, 12/16 at Large
Icon and close—16 + 12 px, 20 + 16 px at Large
Arrow—8 × 4, 10 × 5, 12 × 6 for Description
Arrow inset—8 / 10 / 16 px from the corner
Show delay—300 ms on hover, none on focus
Esc