Tooltip

Tooltips reveal a label or additional information when a user interacts with a UI element. They are explicitly triggered and persist until dismissed.

Tooltips follow two semantic messaging structures:


• Descriptive 
• Info

A descriptive tooltip clarifies a UI element that lacks a visible label.

The label is pulled directly from the anchor element's accessible label and should simply state the element or action.

• Use sentence case
• No ending punctuation
• Aim for 1-3 words

An info tooltip defines terms or provides secondary details users might need without requiring them to navigate away.

Optional. Use a title only when the tooltip needs an introduction. It should succinctly summarize the rest of the content. Most tooltips don't need a title.

• Use sentence case
• No ending punctuation
• Aim for 3-6 words

Required. Use the body to define jargon and technical terms, or to provide additional context. Don't repeat content already on the page or include interactive elements like buttons or links.

• Use ending punctuation
• Max 3 lines

Tooltips appear after a 2 second delay while hovering or focusing on an anchor element. They fade out 1 second after the anchor element loses hover or focus.

Tooltips automatically disappear 1 second after the element loses hover or focus, or when another element receives hover or focus that reveals a tooltip.

Tooltip labels should avoid wrapping where possible. When required, the label wraps to a new line when extending beyond the width of the container.

Tooltips appear to the side of the anchor element that has open space. The default position is below the anchor element.

Tooltips appear on hover or focus on smaller screens or browser windows. They’re uncommon on native platforms.