Overview | Clarity Design System

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

<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
  <cds-icon shape="info-circle" size="md"></cds-icon>
  <span class="tooltip-content">I'm still small.</span>
</a>

Medium

.tooltip-md is 240px wide

<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
  <cds-icon shape="info-circle" size="md"></cds-icon>
  <span class="tooltip-content">I'm the medium sized tooltip</span>
</a>

Large

.tooltip-lg is 360px wide

<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
  <cds-icon shape="info-circle" size="md"></cds-icon>
  <span class="tooltip-content">I am the large tooltip and very wide for long content.</span>
</a>

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`

<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm tooltip-top-left">
  <cds-icon shape="info-circle" size="md"></cds-icon>
  <span class="tooltip-content">Lorem ipsum sit</span>
</a>

`.tooltip-top-right`

<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm tooltip-top-right">
  <cds-icon shape="info-circle" size="md"></cds-icon>
  <span class="tooltip-content">Lorem ipsum sit</span>
</a>

`.tooltip-bottom-left`

<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-bottom-left">
  <cds-icon shape="info-circle" size="md"></cds-icon>
  <span class="tooltip-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
</a>

`.tooltip-bottom-right`

<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-md tooltip-bottom-right">
  <cds-icon shape="info-circle" size="md"></cds-icon>
  <span class="tooltip-content">Lorem ipsum dolor sit amet, ipsum</span>
</a>

`.tooltip-right`

<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-right">
  <cds-icon shape="info-circle" size="md"></cds-icon>
  <span class="tooltip-content">Lorem ipsum dolor sit amet, ipsum</span>
</a>

`.tooltip-left`

<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm tooltip-left">
  <cds-icon shape="info-circle" size="md"></cds-icon>
  <span class="tooltip-content">Lorem ipsum sit</span>
</a>

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.