Tooltips

A tooltip labels an element that is not self-explanatory, most often an icon-only control. It appears on hover and on keyboard focus, and disappears again on leave, on blur or on Escape.

A tooltip finds its own anchor: it looks for the element whose aria-describedby points at the tooltip's id, and attaches its listeners there. That is also what makes the connection readable for assistive technology, so the id is not optional.

Basic tooltip#

<div aria-describedby="tooltip">
	Hover over this text
</div>
<Tooltip id="tooltip">
	This is a basic tooltip
</Tooltip>

Button with tooltip#

Button and IconButton have built-in support, so a title is enough. They render the tooltip for you, wire up aria-describedby and use the same text as the aria-label, which is what makes an icon-only button announceable. A disabled or loading button drops its tooltip, since there is nothing left to hover.

<Button title="This is a button tooltip">
	Hover over this button
</Button>
<IconButton title="Add to favorites">
	<Icon>favorite</Icon>
</IconButton>

Positioning#

A tooltip sits above its anchor and centers on it. Both sides are custom properties, so you can move it without touching the component. It is rendered in the top layer as a popover="hint", which keeps it above scroll containers and clipping ancestors, and it flips to the other side by itself when there is no room left.

<Button title="Shown below the button" --np-tooltip-position-area="bottom">
	Below
</Button>

Touch devices#

There is no hover on a touch screen and no reliable way to reveal a tooltip there, so on devices that report (hover: none) and (pointer: coarse) the tooltip is not rendered at all. Never put information in a tooltip that is not available anywhere else.

Accessibility#

The tooltip renders role="tooltip" and is tied to its anchor through aria-describedby, so a screen reader reads it as a description of the control rather than as separate content.

It only opens on :focus-visible, which means it stays out of the way for pointer users while still appearing for anyone tabbing through the page. Escape closes it, and after the pointer leaves it waits half a second before hiding, so the tooltip itself can be reached, for instance to select the text inside it.

<IconButton aria-describedby="delete-tip">
	<Icon>delete</Icon>
</IconButton>
<Tooltip id="delete-tip">Delete message</Tooltip>

Theming#

--np-tooltip-position-area takes any CSS position-area value, for example bottom, right or bottom span-right. The colors come from the inverse-surface and inverse-on-surface roles of the theme.

API#

Attributes#

Everything else you pass is forwarded to the tooltip element, so class, style and the usual event handlers work as expected. role is set by the component.