Tooltip
A short text that appears when a button or link is hovered or focused. Specification: docs/components/tooltip.md
Placement × size
Every placement and size, shown open against the dashed boxes. Real tooltips use popover="hint" and open on hover or focus (see Triggers). Scroll one to the top of the window: it flips below to stay visible, arrow included.
sm
(theme decides)
block-start
block-start inline-start
block-start inline-end
block-end
block-end inline-start
block-end inline-end
inline-start
inline-end
md
(theme decides)
block-start
block-start inline-start
block-start inline-end
block-end
block-end inline-start
block-end inline-end
inline-start
inline-end
lg
(theme decides)
block-start
block-start inline-start
block-start inline-end
block-end
block-end inline-start
block-end inline-end
inline-start
inline-end
Triggers
Hover or focus. The trigger is a button or a link with interestfor; Escape dismisses.
Icon-only buttons: the tooltip shows the label
The label is already the button's name, so there is no aria-describedby (it would be read twice).
Description: the tooltip adds information
The trigger points at it with aria-describedby too.
Why an action is unavailable
aria-disabled, not disabled: a disabled button can't be focused or hovered reliably, so its tooltip would never show.
Placement from the author
A vertical rail: tooltips prefer the end side.
Size inherited from a container
Edge cases
Long text
Long text wraps at a maximum width.
Right-to-left
The inline start and end follow the direction: inline-end is on the left here.
block-start inline-start
block-start inline-end
inline-start
inline-end
block-end inline-start