Tooltips display more information when users hover over, focus on, or interact with an element.
- Container: Serves to house information and depending on situation where you want the tooltip to appear.
- Text: Serves to tell users what the tooltip is about.
Within the tooltip
Ensure that there is a min of 16px spacing within the tooltip.
Tooltip should be used:
- When you want to provide additional explanation for a form field that may be unfamiliar.
Tooltip should not be used:
- When information is vital to task completion.
Position tooltips so they don’t block content
When choosing the place to display the tooltip, make sure you don’t cover important content.
Tooltips should be consistent in style and design
This is so that it is more intuitive to users.
Provide sufficient contrasts
A moderate contrast is important to ensure the tooltips are more visible to users.