Dimensions
Brief
Caveat
Explanatory
Guide
Cursor
Depending on the element interactivity, we use a mouse cursor.
- For non-clickable elements, eg. a help icon, we use the "help" cursor
- For disabled elements, eg. a disabled button, we use the "not allowed" cursor
Typography
Text in a tooltip should be set in sentence case. Only the first word in a phrase and proper nouns are capitalized.
|
|
Font-size (px) |
Font-weight |
|
Brief tooltip |
11 |
Bold |
|
Explanatory tooltip |
13 |
Regular |
|
Caveat tooltip |
11 |
Regular |
|
Guide tooltip |
13 (headline) / 11 (body) |
Bold / Regular |
Placement
By default, tooltips are positioned on top of the trigger item. However, depending on specific needs, they may be placed bottom, left or right of the trigger item. You may align the container of the tooltip text to the center.
Do
Don’t
Best practices
- Align the tooltip to the element its describing. By default, the tooltip opens above an element, unless there is no space in which case it opens below.
- In selects, the tooltip preferably opens on the left side, unless there is no space, in which case it can open on the right side.
- For main bars and sub-navigations, the tooltip opens below the element.
- Between the tooltip and the element, there’s a 6px gap.
- Tooltips have a 12px safe zone from all sides (top, bottom, left, and right).
Smart opening
- If the tooltip would open under the fold, change the opening direction.
- If the tooltip would open out of the screen, change its position but not its width.
Displaying the tooltip
- By default, tooltips are 200 milliseconds delayed in displaying.
- If the user’s cursor leaves the element before the tooltip pops us, keep the tooltip hidden.
Multiple items in one tooltip
Use an explanatory tooltip to extend condensed information in the UI. If you need to list more than 10 items or share a complex piece of information, use a detailed view or a modal.
Detailed view
If possible, open a detail listing all the items. The detail is usually displayed inside a panel, but it can be also on a different page on the platform.
Modal
If the list can't include or display all the details or if the tooltip refers to a different part of the product, you can open it as a modal.