Tooltip
Tooltips disclose an element’s label when the label isn’t visible.
- Label
- Container
Label
The label is usually populated automatically by the anchor element’s accessible label.
Presentation
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.
Dismissing
Tooltips automatically disappear 1 second after the element loses hover or focus, or when another element receives hover or focus that reveals a tooltip.
Text overflow
Tooltip labels should avoid wrapping where possible. When required, the label wraps to a new line when extending beyond the width of the container.
Placement
Tooltips appear to the side of the anchor element that has open space. The default position is below the anchor element.
Small
Tooltips appear on hover or focus on smaller screens or browser windows. They’re uncommon on native platforms.
Medium
On medium screens, tooltips appear on hover or focus.
Large
On large screens, tooltips appear on hover or focus.
Multiple tips
Do only show a single tip at a time.
Don’t override tip behavior to show multiple at once.
