General guidelines
Use the Tooltip to provide more information (e.g.: give more details about data in a visual, show all of a truncated text, etc.) or to explain an element’s function (e.g.: the function of an icon or a button, etc.).
Various components to apply tooltips in your design depending on the element position (top, bottom, left/right).
Best practices
- Use the tooltip for brief and concise information that provides complementary information.
- If the information is totally essential for the user’s choice, opt to show it directly in the interface.
- Choose a Modal or a Popover when the content requires a complementary action.
- Adapt the opening of the tooltip in relation to the position of the element within the interface (top, bottom, left, right).
- The tooltip generally appears on hover (for desktop versions) or on tap (for mobile versions).
Placement
The Tooltip superimposes itself on the screen. In relation to the position of the element within the interface, it may open from the bottom, the top, the left or the right.
The arrow that links the tooltip to the element must be located at the same level as the target element.
Size
The tooltip has no minimum size. His size depends on its content : the text.
Code & Design assets
Request code and design assets for creating user interfaces.
Can I contribute to the System?
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.