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.

 

Variants

Help tooltip

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

Text tooltip

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

 

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.

 

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.

 

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.

 

Different chart tips examples

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

 

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

 

 

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