Tooltip

Component checklist

Tooltips are text containers that provide users with additional information about a particular area of the product. They appear when the user hovers, clicks, or focuses on a UI element, such as a button, an icon, or an underlined word.

The message inside the tooltip should be helpful and provide additional context. Tooltips shouldn’t be relied on for essential information.

 

---

 

Variants

We differentiate tooltips based on the following:

1. their interactivity: definition tooltip and interactive tooltip.
2. their function: brief tooltip, explanatory tooltip, guiding tooltip, caveat tooltip, and chart tooltip.

 

---

 

Tooltips based on interactivity

Definition tooltip

The definition tooltip provides additional help or explains terms or items. You may use it to extend the information of a UI element or explain a word embedded in a longer text.

 

Guide to definition tooltips

• Make the definition tooltip brief, read-only plain text.
• Use the definition tooltips to explain proper nouns, technical terms, or acronyms.
• Only use them with text elements that are compounds of two letters or more.

Types

• Brief tooltips
• Explanatory tooltips
• Caveat tooltips
• Chart tooltips

 

Interactive tooltip

Interactive tooltips may include rich text and contain interactive elements such as buttons or links.

The best use of the interactive tooltip is for onboarding experiences and product tours. In other cases, avoid hiding interactive content in tooltips.

 

 

Guide to interactive tooltips

• Use the interactive tooltips to lead the user to additional content, for example, when explaining how a metric is calculated or data acquired.
• Never use only interactive elements and always consider the context the user needs before clicking a link or a button.

Types of interactive tooltips

• Explanatory tooltip with a button or a link
• Caveat tooltip with a button or link
• Guiding tooltip

 

---

 

Tooltips based on function

Given the complexity of a tooltip or its usual usage, we differentiate the types of tooltips listed below. Use the one that fits your context the best.

 

Brief tooltip

Use brief tooltips to explain icons and buttons with icons.

 

Brief tooltips consist of one or two words; if you need longer, more complex tooltips, use the explanatory tooltip.

 

Explanatory tooltip

Use explanatory tooltips when there’s a need for comprehensive information, for example, to explain metrics or disabled components. When defining a button with an icon or an icon itself, use the brief tooltip.

The explanatory tooltip can include an interactive element (link, button, etc.).

 

Technical aspects of explanatory tooltips

• The maximum width of a tooltip is 480 px, but the actual width should always be defined by the design of the area and depend on content and context.
• The text inside a tooltip is always aligned to the left.

 

Guiding tooltip

Use guiding tooltips to explain or highlight new features, and to walk users through the product.

 

For walkthroughs and onboarding, use the guiding tooltips together with a pulsar element.

Depending on the context, you can use a single tooltip or design a multi-step tooltip combined with buttons.

 

Caveat tooltip

Use caveat tooltips to draw attention to changes that may have happened without the users’ knowledge.

Use caveat tooltips together with a label or icon.

 

The tooltip should automatically appear a few seconds after a change is made.

 

Chart tooltip (TBD)

Use chart tooltips to provide users with explanations and additional information in charts.

When adding a tooltip to charts, always use a white container.