Examples

The Tooltip component can render a variety of content ranging from short descriptive text, to paragraphs with links, or more complex interactive popovers.

The component provides a variety of props to configure tooltip behavior for these different use cases (i.e. interactive, dialog), and to customize styling (i.e. offset, maxWidth, className). The element that triggers a Tooltip can also be fully customized via props (i.e. triggerComponent, triggerContent).

This component makes use of @popperjs/core

Icon Trigger

Inline

Interactive content

With Close

Guidance

When to use

• Use for helpful, non-critical information to strengthen an existing message.
• Use to increase certainty and enhance confidence about an interaction.
• Use with brief descriptions as tooltips perform best with succinct text.
• Tooltips are useful as a last resort for space-constrained UI. Explore other options for keeping content visible without a tooltip.

When to consider alternatives

• Don’t hide information necessary for completing a task behind a tooltip interaction.
• Tooltips are microcopy and should be brief. Don't use a tooltip if you need a lot of text.
• Don’t use a tooltip when its content is repetitive or if usability is obvious.
• If content can fit outside a tooltip, don't use a tooltip.

Accessibility

Accessibility

• Tooltip content should not cover other interactive elements or important information.
• When moving the pointer over an active tooltip, the tooltip should stay open.
• Tooltip content must appear after a short amount of time, when focus changes in response to a mouse hover, or after the parent element receives keyboard focus.
• Active tooltips should have the ability to be dismissed by pressing the escape key.
• Ensure that open tooltips do not block or obscure vital information or interactive elements on the page, allowing users to access all necessary content without interference.

Accessibility testing

General accessibility testing

• Using zoom should not obstruct the tooltip or other content – when zooming to 200%, the tooltip content should remain visible.

Keyboard testing

• Tooltips must be accessible with only a keyboard.
• When pressing the “tab” key, the user should be able to navigate to the tooltip and activate the tooltip.
• Pressing the escape key while the tooltip is active, should close the tooltip.
• When opening a tooltip, the user should be able to navigate in and out of the trigger component without difficulty so that the tooltip does not trap the user or move the user around the page unwillingly.
• The focus indicator should be clearly visible around the trigger element.

Screenreader testing

• Use screen readers (e.g., NVDA, JAWS, VoiceOver) to verify that tooltips are announced correctly.
• When focusing on the tooltip trigger, the screen reader should announce the tooltip content.
• When listening to the tooltip with a screen reader, the user should first hear the trigger element content, then the tooltip content, followed by the next content on the page.

Code

React

Review Storybook for React guidance of this component.

Web Component

Go to Storybook for Web Component guidance of this component.

Style customization

The following CSS variables can be overridden to customize Tooltip fields:

Component maturity