Tooltip

Small popups for added context triggered by hover

Healthy
Show details
Healthy
Published: January 30, 2024
Updated: February 21, 2024

Overview

Tips are fly out bubbles that are used by tooltips and hover tips. They’re used to progressively display information only when it’s contextually relevant. Prefer above placement as a default.

Design

Tooltips display supporting information for interactive elements. They are visible on hover and focus.

🟢 Tooltip/Top

🟢 Tooltip/Top

 

Variants

Help tooltip

A tooltip that’s triggered by hovering over an ‘?’ icon.

🟡 Help Tip / State=Default, Size=16px

🟡 Help Tip / State=Default, Size=16px

🟡 Help Tip / State=Default, Size=24px

🟡 Help Tip / State=Default, Size=24px

🟡 Help Tip / State=Hover, Size=16px

🟡 Help Tip / State=Hover, Size=16px

🟡 Help Tip / State=Hover, Size=24px

🟡 Help Tip / State=Hover, Size=24px

🟡 Help Tip / State=Focused, Size=16px

🟡 Help Tip / State=Focused, Size=16px

🟡 Help Tip / State=Focused, Size=24px

🟡 Help Tip / State=Focused, Size=24px

Text tooltip

  • Label color is inherited from the context within the text it's used in.
  • Dashed underline, Grey 50 (Brand) color
Text tip example

Text tip example

 

Disabled button tooltip

While not preferred to disable buttons, certain roles within Iterable may not have the appropriate access rights. Adding a tooltip on hover helps those with this role understand why the action may not be available to them.

Disabled button example

Disabled button example

 

Chart tips

Tips that appear while hovering over a chart are an extension of the basic tooltip, but provide the marketer with contextual information around a series or group of series while hovering a chart.

🔴 Single chart tip

🔴 Single chart tip

🔴 Multi-line chart tip

🔴 Multi-line chart tip

🔴 Group chart tip

🔴 Group chart tip

 

In area or line charts where there are multiple series, you can use the Multi-Line Chart Tip component to get started quickly. By adjusting the padding in the layers named ‘Edit padding’, you can quickly set the alignment of the tips without having to break the master component.

 

Edit padding example

Adjust the gap in figma to move the placement of the individual chart tips.

Edit padding example

Edit padding example

In area or line charts where there are multiple series, you can use the Multi-Line Chart Tip component to get started quickly. By adjusting the padding in the layers named ‘Edit padding’, you can quickly set the alignment of the tips without having to break the master component.

 

Different chart tips examples

An example of different types of chart tips used for different chart types

Chart tip examples - 1

Chart tip examples - 1

Chart tip examples - 2

Chart tip examples - 2

 

Guidelines

Use cases

  • Help provide additional description or information without having it always visible in the UI
  • Can help provide details on how a particular metric is calculated in Messaging Insights

 

Underlined text tips

  • Underlined text tips provide passive tertiary information about a particular label or item. A common example is the created date property may say: "created 3 days ago" while hovering over the text will show the full created date and time properties.
  • This should be used sparingly though in places like tables, where marketers may want to filter by specific attributes but can't because the values are not actually a part of the table itself
  • The content should follow the same guidelines as tooltips and should not contain links

 

  • Do ensure that tips can be triggered by focusing on the element that enables them (for example focusing a disabled button should show trigger the tip).
  • Don't require the user to click to enable a tooltip (use a popover for that interaction)
  • Don't modify the colors of the tip container
  • Don’t use different icons to the trigger the tip other than the i and ? icons

 

Content

  • Do not include interactive elements, like links or buttons, within the tooltip
  • Do not use tooltips for information that is vital to task completion. Consider using input help text, a banner/notice, or descriptive text under a section’s heading instead
  • Toggletips should always trigger by hovering on a i or ? icon. With the i focused around providing additional context of a particular element or label and the ? providing an explanation of that element or label

 

Accessibility

  • Tooltips should be visible upon hover or focus

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Healthy