Tooltip
Components
A tooltip is a small informational popup that appears when users hover over or focus on an element, providing additional context or explanations. It disappears when the user moves away, making it ideal for offering brief, helpful hints without cluttering the interface.
Checklist
Reset
Information
Keep content clear and concise
Information should be entirely relevant to what the tooltip is for, and elaborate on what is already visible
Contrast
The background should be different from the underlying content
An inverse colour works best for contrast - if behind the tooltip is dominantly light, make the tooltip background dark with light text
Visibility
How a tooltip looks and shows
A tooltip should activate on hover or select of an icon or text it is relevant to
Only one tooltip should be visible at a time
A tooltip should not cover the content it is relevant to
Dismiss action
Depending on how intrusive or extensive the tooltip is, a dismiss allows the user to feel more in control and allow the tooltip to feel more flexible and non-compulsory
