Tooltips

Definition

Tooltips display text that describes an element or provides additional information. Tooltips can appear on hover, focus, or tap, and disappear after a short duration.

Common Characteristics

All tooltips are light text on a dark background and are normally positioned below the element they are paired with. They fade in and persist on hover or tap, and fade out off hover or another tap. Tooltips are stationary and do not follow the cursor.

Tooltip Basics

Tooltips come in two sizes: small and large. Small tooltips are always a single line of small, center-aligned text. Large tooltips have larger, left-aligned text that can wrap, and a pointer.

Interactivity

When a tooltip is paired with a functional element (e.g. a print icon, a linked avatar, etc), the tooltip is displayed on hover, but is ignored on tap. The tap executes the function instead of displaying the tooltip.

With non-functional elements (e.g. an info icon, etc), the tooltip is displayed on tap or on hover.

Small Tooltip

The small tooltip width varies with the center-aligned, 12px text plus 8px left/right padding up to a maximum of 200px. If a small tooltip won’t accomodate your text on a single line, use a large tooltip instead.

Functional Element

Functional elements will not show tooltips on touch devices.

Non-Functional Element

Large Tooltip

The large tooltip has a fixed 200px width, 16px left/right padding, and wrapping, left-aligned 14px text.

Functional Element

Functional elements will not show tooltips on touch devices.

Non-Functional Element

Typical Examples

Tooltips are commonly used with icon functions like print or close, or to provide contextual information.

Icon functions with small tooltips.
Functional elements will not show tooltips on touch devices.

Info icon with large tooltip

Avatar with small tooltip