If interfaces were books, tooltips are like footnotes.

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:

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.
{% toggleText('tooltip') %}
Tool is tipped

Tooltip reference

$tooltip-width200pxThe tooltip’s width
$tooltip-bg-color#ffffffThe tooltip’s background color
$tooltip-font-color#1d1d1dThe text color