OVERLAYS / COMPONENTS
Tooltip
Offer a short, optional explanation.
About tooltip
Tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when escape is pressed or on mouse out. Tooltip widgets do not receive focus. A hover that contains focusable elements can be made using a non-modal dialog.
Anatomy
Shared parts, named consistently.
- 1ContainerRequired
The container of the content.
- 2LabelRequired
The label of the Tooltip.
- 3PointerRequired
Indicates the direction of context that the tooltip is attributed to.
Try the default
A working example with the shared V1 visual language.
When to use
Use for supplementary context on hover and keyboard focus. Keep required instructions visible; do not put interactive content inside.
Focus opens the tooltip. Escape dismisses it. The trigger remains the only keyboard stop.