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

Descriptive tooltips provide supplementary information on hover or long-press to clarify UI elements, explain functionality, or offer additional context.

The label is usually populated automatically with the anchor element’s accessible label and should simply state the element or action.

• Use sentence case
• No punctuation
• Aim for 4 words or fewer

Info tooltips explain what a feature is, why it exists, or how it works, without requiring users to leave their current context.

Optional. The title succinctly introduces or summarizes the rest of the tip content. Only use it when the tip needs more of an introduction. Most tips are explained in the body copy.

• Use sentence case
• No ending punctuation
• Keep to 3-6 words

The body provides additional context, information, or guidance about a UI element. Don’t repeat content already on the page or include interactive elements like buttons or links.

• Use ending punctuations
• Max 3 lines
• When introducing a new function, lead with a verb to encourage user interaction

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.