Tooltip

Supplementary explanations on hover, keyboard focus or touch, without clipping inside a Card.

Basic structure

button.tooltip-trigger[data-tooltip][title="Explanation"]

Try it

example / month
billed monthly

HTML

<div class="content"><p><button type="button" class="tooltip-trigger" data-tooltip title="A useful explanation, close to the thing it describes.">Hover, focus or tap this text</button>.</p><div class="price"><strong><button type="button" class="tooltip-trigger" data-tooltip title="An illustrative monthly minimum, not an actual service offer.">$99</button></strong><small>example / month<br>billed monthly</small></div></div>

Options

Class or attribute	What it does
`title`	Tooltip text and the native no-JS fallback.
`data-tooltip`	Delegated enhancement also supports dynamically generated content.
`price value`	A tooltip-trigger button may sit inside the Price strong element.
`escape / outside click`	Dismiss the tooltip; moving onto the tooltip keeps it open.
`aria-describedby`	Associated automatically without replacing existing descriptions.