Tooltips display additional information upon hover or focus that is contextual, helpful, and provides clarity to a user.
Color
| Element | Property | Color token |
|---|
| Label | text color | $text-secondary |
| Trigger button | svg | $icon-secondary |
| Container | background-color | $background-utility |
| Text | text color | $text-on-color |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Label | 14 / 0.875 | Regular / 400 | $body-compact-02 |
| Body text | 14 / 0.875 | Regular / 400 | $body-compact-02 |
Structure
| Element | Property | px / rem | Spacing token |
|---|
| Container | max-width | 280px | – |
| | padding | 16 / 1 | $spacing-05 |
| Trigger icon | height, width | 14px / 0.875 | – |
| | margin-left | 8 / 0.5 | $spacing-03 |
