Tooltip

Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when users hover or focus.

View in Storybook

Anatomy

Tooltip provides more information about the target element it is associated with. It appears onHover or Focus of an element, typically a Button.

Tooltip
  1. Text: Displays the Tooltip information.
  2. Description (optional): Additional text to support the tooltip's primary messaging.
  3. Badge (optional): Used to display keyboard shortcuts.

 

Image
  1. Image (optional): A visual aid to help support a Tooltip messaging.

 

Usage

Tooltip provides greater product UI understanding to our customers in multiple ways. They are also a key element in improving accessibility and further helpful information.

Tooltip clearly explains the purpose of an action when a label either isn't visible or does not convey its meaning.

Tooltip clearly explains the purpose of an action when a label either isn't visible or does not convey its meaning.

When space is restricted, a Tooltip displays the full messaging of any truncated text.

When space is restricted, a Tooltip displays the full messaging of any truncated text.

 

Icon buttons can describe their meaning or give extra context to content.

Icon buttons can describe their meaning or give extra context to content.

Tooltip has a max-width of 240px when a greater volume of text is needed.

Tooltip has a max-width of 240px when a greater volume of text is needed.

 

For further context, a secondary text label can be toggled below.

For further context, a secondary text label can be toggled below.

A badge can be included to inform users of any keyboard shortcut for an action.

A badge can be included to inform users of any keyboard shortcut for an action.

 

Placement

The direction of the Tooltip correlates to the position of the action it is linked to, depending on its placement on the screen and length of text within the Tooltip.

 

Pointers

To indicate the placement of a Tooltip, the corner radius is removed to show a subtle point instead of a traditional arrow.

Points

 

Padding offset

The offset is the distance between the end of the tip and the target. The default value is 8px horizontally and vertically in all placements.

Padding

 

 

Best practice

Although useful on any text or actionable item, Tooltip needs to be used in a sensible manner to avoid reducing its importance. It needs to;

 

  • Provide useful, additional information or clarification.
  • Succinctly describe or expand on the element they point to.
  • Be used sparingly. If you’re building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.
  • Not be used on any disabled elements as keyboard users would not be able to view its contents.

 

Do's and Don'ts

Do

Don't

✅ Make tooltips clear and concise.

🚫 Include links or other interactive components into a tooltip as these are not accessible.

✅ Keep tooltips in view until the user focuses away.

🚫 Use rich text formatting (Bold, Italic) as screen readers will not convery these differences.

✅ Add to icon buttons and standalone links for greater context.

🚫 Use tooltips for essential information.

 

🚫 Repeat the same information in a Tooltip from the element it appears from.

 

Also see