Tooltip
The following page documents visual specifications such as color, typography, structure, and size.
Color
Icon button tooltip color
Element | Property | Color token |
---|---|---|
Container | background-color | $background-inverse |
Text | text-color | $text-inverse |
Icon button tooltip interactive states
Icon button tooltip states rely on what kind of button is being used. Refer to button styles for specific hover and focus states.
Definition tooltip color
Element | Property | Color token |
---|---|---|
Label | text-color | $text-secondary |
Trigger | border | $border-strong |
Container | background-color | $background-inverse |
Text | text-color | $text-inverse |
Definition tooltip interactive states
State | Element | Property | Color token |
---|---|---|---|
Hover | trigger | border | $border-interactive |
Active | trigger | border | $border-interactive |
Focus | label and border | border | $focus |
Typography
Tooltip labels and text should be set in sentence case.
Element | Font size (px/rem) | Font weight | Type token |
---|---|---|---|
Label | 12 / 0.75 | Regular / 400 | $label-01 |
Body text | 14 / 0.875 | Regular / 400 | $body-01 |
Structure
All tooltip types have a varying height based on the amount of content they contain.
Icon button tooltip structure
Class | Property | px / rem | Spacing token |
---|---|---|---|
Container | max-width | 208 / 13 | – |
padding-left, padding-right | 16 / 1 | $spacing-05 | |
padding-top, padding-bottom | 2 / 0.125 | $spacing-01 | |
Caret | margin-top | 4 / 0.25 | $spacing-02 |
Definition tooltip structure
Element | Property | px / rem | Spacing token |
---|---|---|---|
Container | max-width | 176 / 11 | — |
padding-top, padding-bottom | 8 / .5 | $spacing-04 | |
padding-left, padding-right | 8 / .5 | $spacing-04 | |
margin-top | 4 / 0.25 | $spacing-02 | |
Trigger | border-bottom | 1 px | — |
Default placement
Tooltip directions, by default, are set to auto. Upon opening, tooltips can detect the edges of the browser to be placed in view so the container does not get cutoff. Tooltips can instead use specific directions and may be positioned top, right, bottom, or left of the trigger item. Tooltips should be placed at least 16px / 1rem off of the bottom of the page and not bleed off page or behind other content. On mobile, tooltips can only appear below the tooltip icon.
Feedback
Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.