Tooltip

Tooltips work on buttons, links and any other element. Plain text with a tooltip gets a dotted underline, so readers know there is more.

Placement

The tooltip sits above by default. data-placement moves it to the right, bottom or left.

Accessibility

The tooltip text is drawn with CSS, and screen readers read it as part of the element's name, so <button data-tooltip="Save file">Save</button> is announced as "Save file Save". Keep it short and extra, and put anything the user needs in the label itself, for example with aria-label on an icon button. The pointer can move onto the tooltip without closing it, but Esc cannot close it, since that needs a script. Form fields cannot draw a tooltip, so put it on their label.

data-tooltip is skipped on elements that draw their own icon or spinner: busy buttons, .close, .nav-toggle, summary and nav and step items. Use a hint popover there.

Hint popover

A popover="hint" element opened by interestfor is the richer tooltip. The browser shows it on hover and focus, closes it with Esc and describes the button with it for screen readers. It is anchored to the button, flips away from the edge of the screen and is never clipped. data-placement works the same. Browsers without interestfor do not show it yet, so keep the label enough on its own.

Variables