Tooltips

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') %}
<div class="has-tooltip">
    <div class="tooltip">
        <img class="icon iconic success" data-src="opattern-icons/svg/smart/circle-check.svg" />
        Tool is tipped
    </div>
</div>

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