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

Figma UI Kit	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production
Angular	PublishedElement can be used in production
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.

Component	Use case
Tooltip	Tooltip is a container that temporarily displays a short, text-only definition and is activated when a user hovers or focuses on an icon or other trigger. Limit tooltip content to short descriptions written in sentence case. If content is a full sentence, use punctuation.
Popover	Popover 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

Body text: comprises of a concise definition or description of the target or target’s reference.
Pointer: directs user’s attention to the source element that triggered the tooltip.

Articles

Read the Nielsen Norman Group's article on tooltip.

Read the Nielsen Norman Group's article on tooltip's timing.

Usage

Use tooltips for secondary or supplemental information. While the tooltip container allows for a max of 200 characters, try to limit text to a short description. Punctuate the text within a tooltip if the description is a full sentence.

If the information is critical, place it on the page so that the user doesn’t miss it. Do not use tooltips to display error or status messages, long passages of text, images, or interactive content.

Form fields

Tooltips can be a source of additional context in form fields. Ideally, present instructional content in each component’s helper text if it’s necessary to help the user fill out the form correctly. In this case, the tooltip is unnecessary, as you should not repeat the helper text content in a tooltip.

The trigger is often a button, icon, link, or a combination of elements.

Truncated content

Use tooltips to show the full line of truncated information, such as the file name in the file input component.

Tooltip can make space for nonessential content.

Data in charts

A preformatted tooltip is provided in the Data Visualization library Figma kit and is intended for use within charts only. The layout within the tooltip includes placeholders for labels and values to ensure consistent implementation. There are no behavioral changes to note regarding the data visualization tooltip. However, each tooltip’s trigger should always correlate to a single data point on a series. You can review customization guidance on the chart customization pattern.

Example of a tooltip displaying short, contextual text in a line chart.

Layout

Alignment

Consider the page elements when choosing the default position of a tooltip. Note that constraints, such as screen size, will override the default positioning to ensure the tooltip is always within the viewport. For example, a tooltip with a bottom-start selection will automatically flip to top-start placement if there is not enough room on the screen below the trigger element. On S and XS breakpoints, the trigger element may not provide the opportunity to use one of the orientations of tooltip pointer. In this case, the tooltip is set to no pointer and positioned above the element.

Note that position and pointer are shown separately in Figma for easy scanning and selection. However, these are considered a single property, called “placement”, in Storybook documentation.

Position

Tooltips uses four positions in relation to the trigger element: bottom, top, left, and right. Make sure the direction and position of your tooltip don’t obscure information on the page that the tooltip content is directly related to.

Selection	Description
Top	Above the trigger (default)
Bottom	Below the trigger
Left	To the left of the trigger
Right	To the right of the trigger

Pointer

Tooltip has four pointer options: start, center, end, and no pointer. Center is the default pointer position. If the tooltip does not fit without being clipped by the side of the page, then it should dynamically pick a pointer orientation that fits in the space between the grid margins.

Selection	Description
Center	When tooltip is set to top, the pointer points down to the trigger (default)
Start	Top, or left in left-to-right localizations
End	Bottom, or right in left-to-right localizations
No pointer	Tooltip shown without a pointer

Interaction

Behavior and states

Tooltips are activated upon focus state, or when a user hovers over a trigger element. To dismiss the tooltip, stop hovering or focusing the trigger element. Tooltips are always activated and dismissed by press on mobile. Mobile tooltips require a close icon to dismiss.

State	Behavior
Hover	Hovering on the trigger element activates the tooltip on desktop.
Focus (initial tab or press)	One tab focuses on the dismiss icon in desktop tooltips. A second tab exits the tooltip.

Standards

Accessibility

All tooltips should be able to be activated and dismissed via pointer, keyboard, and touch
Users should have full control of the tooltip interaction regardless of device. Do not cause the tooltip to disappear or timeout after a set interval.
WCAG 2.1: 1.4.13: Content on Hover or Focus

Avoid covering up critical content with a tooltip
As with popovers, make sure that the direction and placement of your tooltip don’t obscure information on the page that the tooltip content is directly related to.
WCAG 2.1: 1.4.13: Content on Hover or Focus

Tooltips should only contain static, text-based content to avoid additional interactivity
Tooltips are specifically for plain text-based content. If you require links, buttons or additional functionality in your tooltip, use a popover instead. Avoid rich text.

Avoid placing essential information in a tooltip
Tooltips should never hide critical information. Whenever possible, avoid using a tooltip altogether and place the information where it is visible at all times.

Tooltips should always describe the triggering element
Do not add a control that is specifically there to trigger a tooltip.

Content

Title
Titles are optional and typically unnecessary, as the trigger’s reference can act as the title. If your tooltip requires a title, be brief and descriptive about the purpose of the tooltip. The title length should not exceed one line.
Do: Password criteria
Don’t: Criteria for creating passwords

Body text
Limit text to short descriptions that relate directly to a particular item or control on the page.

Capitalization
Use sentence case.

Live demo

This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.

You are now entering a live demo of the component.

<div>
  <p>
    Lorem ipsum lorem ipsum Lorem.
    <a href="javascript:void(0);" id="tootltip-trigger-923173934" class="dds__link--standalone" aria-describedby="tootltip-992562000">
      <span class="dds__sr-only">tooltip</span>
      <i class="dds__icon dds__icon--alert-info-cir"></i>
    </a>
  </p>
  <div id="tootltip-992562000" data-trigger="#tootltip-trigger-923173934" data-dds="tooltip" class="dds__tooltip" role="tooltip">
    <div class="dds__tooltip__body">
      <h6 class="dds__tooltip__title">Tooltip Title</h6>
      A few lines of body text in sentence case that are easily scannable and succinct.
    </div>
  </div>
</div>

Copy code

View the tooltip demo and code in Vanilla.

View the tooltip demo and code in Angular.

Tooltip

Status

Contents

What's new

When to use

Anatomy

Articles

Tooltip guidelines

Timing guidelines

Contents

Contents

Usage

Form fields

Truncated content

Data in charts

Layout

Alignment

Position

Pointer

Interaction

Behavior and states

Standards

Accessibility

Content

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Angular

Contents

Tooltip

Status

Contents

What's newCopy link to this section

When to useCopy link to this section

AnatomyCopy link to this section

ArticlesCopy link to this section

Tooltip guidelines

Timing guidelines

Contents

Vanilla

Angular

What's new

When to use

Anatomy

Articles