Tooltip
A tooltip displays a piece of contextual information to explain a feature or terminology.
1. Alike components
Checkboxes are often confused with radio buttons and switches in some use cases. The guidance below helps to differentiate the difference.
| Tooltips | Popover | Modal | |
|---|---|---|---|
| Usage | Explaining a feature or terminology. | Providing contextual information, items, or actions. | Providing a temporary change of content. |
| Content support | Text and links only | Any components | Any components |
| The component can be customized | No | Yes | Yes |
| Containing irrelevant information from the current context | No | No | Yes |
2. Writing content
Do
Display only one piece of additional text content
Don't
Don’t put custom components in it. Use popover in this case.
Do
Write contextual information to explain the terminology in tooltips.
Don't
Never repeat the content.
Do
Only contain non-crucial explanatory information in tooltips.
Don't
Don’t hide crucial information in a tooltip. Write it out.