Skip to main contentCarbon Design System

Tooltip

Tooltips display additional information upon hover or focus. The information included should be contextual, helpful, and nonessential while providing that extra ability to communicate and give clarity to a user.

v11 update: The tooltip component has been refactored to use the popover component under the hood to improve accessibility. Definition and interactive tootips now use the toggletip component to achieve accessibility standards. For v10 implementation guidance, go to v10 Tooltip.

Overview

A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element. The tool tip should be paired with an interactive UI element like a button. Tooltips should be used sparingly and contain succinct, supplementary information. Although Carbon tooltips used to allow for interactive elements such as buttons and links, do not include these elements in tooltips and use toggle tip instead.

Example of tooltip being used with an information icon

Example of standard tooltip

When to use

  • Describe icon buttons
  • When more information is useful in helping a user make decisions
  • When an element needs more context or explanation
  • Use when defining a term or inline item
Example of tooltip being used to desribe an icon button

Example of when to use tooltip to describe an icon button

When not to use

  • Since a tooltip disappears when a user hovers away, do not include information that is pertinent for the user to complete their task. Use helper text that is always visible and accessible for vital information such as required fields.
  • Do not include interactive elements within a tooltip. Interactive elements in tooltips are inaccessible for some users and are hard to use for all users since tooltips do not receive focus. If images, buttons, or links need to be included in supplemental information, use the toggletip component and the disclosure pattern that allows for better tabbing and focus structure, improving the experience for all users.
Example of using helper test rather than tooltip for pertinent information

Do use helper text for pertinent information.

Example of using a tooltip for password requirements.

Do not use tooltips for information for a user to complete their task.

Example of using only text in a tooltip

Use succinct, directive text.

Example of buttons and links in a tooltip

Do not use interactive elements within a tooltip.

Toggletips vs Tooltips

Toggletips and tooltips are similar visually and both contain a popover and interactive trigger element. The two components differ in the way they are invoked and dismissed and if the user must interact with the contents. A tooltip is exposed on hover or focus when you need to expose brief, supplemental information that is not interactive. A toggletip is used on click or enter when you need to expose interactive elements, such as button, that a user needs to interact with.

Variants

VariantPurpose
Standard tooltipProvides nonessential, supplemental information to help a user make a decision
Icon button tooltipDescribes a button’s function or action
Definition tooltipProvides additional help or defines an item or term. It may be used on the label of a UI element, or on a word embedded in a paragraph.
Tooltip variants

Live demo