Tooltips contain details or extra context and are invoked by a user’s interaction. Like dialogs, we use tooltips to keep interfaces simple. Tooltips are hidden by default, so they allow us to layer information without cluttering the interface. Tooltips can:
- Describe or explain Hovering this text activates a tooltip. Neat!another element
- Offer Keep tooltips brief and to the point.instructions, help, or definitions
- Provide En français: infobulleinterpretations, insights, or conclusions
How to use tooltips
The information inside tooltips is not limited to text. They can have images, colors, or other elements. However, make sure the information is concise and can be understood quickly.
Tool is tipped
![]()
Keep the text brief and factual.
![]()
Describe the element the user is currently interacting with.
![]()
Use icons and hierarchical headings, if appropriate.
![]()
Don’t put important information in a tooltip: the user might miss it.
Keep the text brief and factual.
Don’t put important information in a tooltip: the user might miss it.
{% toggleText('tooltip') %}
![]()
Tool is tipped
Tooltip reference
| Variable | Default | Description |
|---|---|---|
$tooltip-width | 200px | The tooltip’s width |
$tooltip-bg-color | #ffffff | The tooltip’s background color |
$tooltip-font-color | #1d1d1d | The text color |
