COMPONENTS

Tooltip

Tooltips display informative, yet nonessential text on hover, tap, click or focus.

Tooltip Intro

Tooltips can display definitions, clarifications, or hints. Use tooltips for text that is nonessential to the user journey.

tooltip-anatomy.png
  1. Label
  2. Container
  3. Tip

There are two types of tooltips — standard and dismissible. Both types can either show or hide the tip point. Standard tooltips can be closed by either moving the cursor or selecting anywhere outside of the tooltip area. Dismissible tooltips can only be closed by selecting the close icon.

tooltip-variations.png

Tooltips can be placed to the top, bottom, left or right of their related content. For top or bottom tooltips, the placement can be more specifically aligned to top left, top right, bottom left or bottom right. Additionally the placement can be set to automatically adjust position to avoid being cut off by a container or browser edge.

tooltip-alignment.png
tooltip-alignment-2.png

When used above a dark background the tooltip should use reverse coloring.

tooltip-dark-background.png

Tooltips can be displayed in large, medium, small and extra small sizes.

tooltip-sizes.png
tooltip-position.png
tooltip-position-side.png
  • Avoid hiding essential content within a tooltip.
  • Tooltips should not overrun container boundaries or pages.
  • Do not use for long text, instead use Popover.
  • Do not include rich content such as videos or photos.
  • Do not display multiple tooltips simultaneously.