Tooltip · kit

Example

Hover or tab to them

Show the markup

<div class="kit-cluster" data-gap="3">
  <button class="kit-button" data-icon type="button" aria-label="Copy" data-tooltip="Copy"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="5" y="5" width="8" height="8" rx="2"/><path d="M3 11V4a1 1 0 0 1 1-1h7"/></svg></button>
  <button class="kit-button" data-icon type="button" aria-label="Edit" data-tooltip="Edit" data-tooltip-placement="bottom"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M10.5 3 13 5.5 6 12.5H3.5V10L10.5 3Z"/></svg></button>
  <button class="kit-button" type="button" data-tooltip="A longer hint that adds to the button's name">With a hint</button>
  <span class="demo-note">Hover or tab to them</span>
</div>

Usage

<button class="kit-button" data-icon aria-label="Copy link" data-tooltip="Copy link">…</button>
<button class="kit-button" data-tooltip="Sends to everyone in the workspace">Share</button>

tooltip.js (in kit.js) watches the whole page, so tooltips work on elements added later too. data-tooltip-placement picks the side: top (default), bottom, left or right, flipping when there's no room.

Tooltips are for names and short hints, a few words. Never put anything people need, or anything they can click, in one: touch screens don't show them.

Accessibility

It shows on keyboard focus straight away, and on hover after a short pause.
Escape hides it without closing a dialog underneath; moving the pointer onto it keeps it open (WCAG 1.4.13).
When the tooltip repeats the element's name (an icon button's aria-label), it isn't read twice. When it adds something, it becomes the element's description, read after its name.
Icon-only buttons still need their own aria-label: the tooltip is the visible version of it, not a replacement.