Tooltip
v3.0
Tooltips disclose an element’s label when the label isn’t visible.
- Skin
- Marko
- React
The label is usually populated automatically by the anchor element’s accessible label.
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.
On medium screens, tooltips appear on hover or focus.
On large screens, tooltips appear on hover or focus.
Do only show a single tip at a time.
Don’t override tip behavior to show multiple at once.
