Skip to main content Skip to navigation Skip to search

Tooltip

A tooltip is a momentary dialogue which surfaces from an info icon and provides additional information pertaining to the corresponding UI element.

Usage

Use a tooltip for actionable icons that do not have text labels, such as the icons in a toolbar. A tooltip is visible on hover.

Don’t use a tooltip on:

  • Components. Provide a descriptive label and use inline or signpost help for more information.
  • Static images. Use the HTML alt tag to provide information about the image.
  • Textual links. Ensure that the link describes its destination and is not truncated.

Don’t rely on tooltips to meet accessibility requirements. Rather, ensure that your underlying content is well-structured for accessibility, for example, by using ARIA roles.

Anatomy

Size

Set a width that accommodates the text string. If no size class is used on the tooltip, the default is 240px wide (e.g - .tooltip-md) is applied. Other choices are 72 px, 120 px, and 360 px.

Extra Small

.tooltip-xs is 72px wide

Small

.tooltip-sm is 120px wide

Medium

.tooltip-md is 240px wide

Large

.tooltip-lg is 360px wide

Placement

Use tooltip positions that ensure the entire element is visible onscreen. Do not cover important UI elements with a tooltip. The default tooltip position is top-right of the tooltip trigger. Tooltips point to the center of the trigger.

CSS classes for position

.tooltip-top-left

.tooltip-top-right

.tooltip-bottom-left

.tooltip-bottom-right

.tooltip-right

.tooltip-left

Content

  • Use a verb phrase to describe the action on the icon, for example, "Edit settings."
  • Use only plain text and be concise. Tooltips can be a sentence fragment.
  • If more detailed information is required, use another form of help.
  • Use sentence-style caps and no ending punctuation.