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
Variants
Help tooltip
A tooltip that’s triggered by hovering over an ‘?’ icon.
🟡 Help Tip / State=Default, Size=16px
🟡 Help Tip / State=Default, Size=24px
🟡 Help Tip / State=Hover, Size=16px
🟡 Help Tip / State=Hover, Size=24px
🟡 Help Tip / State=Focused, Size=16px
🟡 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
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
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
🔴 Multi-line 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
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 - 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
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
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