components icon

Tooltip

Tooltips are containers that temporarily display short, contextual text. They are typically activated when a user hovers over an icon or other trigger.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
PublishedElement can be used in production
React
React
In backlogElement is in backlog
Documentation
In progressElement design and development in progress

What's new

The v2 tooltip was redesigned to meet accessibility requirements and address mobile experiences. It also incorporates the updated foundations, including the new font ramp and color palette.

When to use

Tooltip is similar to popover but is not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or those using screen readers.

ComponentUse case
TooltipTooltip is a container that temporarily displays short, contextual text and is activated when a user hovers or focuses on an icon or other trigger.
PopoverPopover is a container that displays supplemental information after pressing its trigger element. They can contain limited interactions with its content, but should not contain actions that are required for the experience.

Anatomy

A tooltip with parts labelled 1 and 2.
  1. Body text: provides user with additional information.
  2. Pointer: directs user’s attention to the source element that triggered the tooltip.

Kinds

Options

Image of a tooltip with body content only.

Body content only: Used for expanding truncated information, acronym or initialism definitions, or other supplemental content.

A tooltip with a title and body content.

Title and body content: Used for concise, non-essential definitions or summaries.

Articles

Tooltip guidelines

Read the Nielsen Norman Group's guidance.