Tooltip
Tooltips are used to provide additional information about elements or functionalities on a page.
- Overview
- Specs
- Guidelines
Component
Tooltips show details about an interface element (text, button or image) and are visible in the Hover state of that element (applicable on desktop).
Tooltips contain short, very specific information describing the functionality of the UI element to which they belong. They can be positioned at the top, bottom, left or right of the element in question.
A: With Icon Variation
B: Only Tooltip Variation
1: Icon
2: Tooltip Description
Used for:
Hover
When some labels need additional context, a Tooltip can be used to give a more precise explanation ;
Trimming
As some buttons labels can exceed the max width defined by the design system, a tooltip is used to show the entire label;
Only icon
For components that only use icons, a Tooltip can be required to explain the context of the assigned action ;
Abbreviated labels
In cases where certain labels are abbreviated, the use of Tooltips is primordial, as they will give the extra context for the user;
Error information
To warn users and prevent them from making an error on a form again, and especially in a text-field, a Tooltip is displayed when hovering over the warning icon to explain the error made;
Don’t use for:
Important messages
For important messages or messages that are of imperative reading, consider using Inline messages;
Mobile devices
On touch based devices, such as smartphones or tablets with no hover capability, Tooltips may not be accessible or practical for the users;
User interruption
Unexpectedly or intrusively, they can interrupt users’ workflow and impede task completion, leading to frustration;
Overuse
When Tooltips are excessively used or used for every element in the interface, they can overwhelm users with information and diminish their effectiveness.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Updated typography;
- Updated state color variables;
