Tooltip

CSS-only tooltip via a data-tooltip attribute. Shows on :hover and :focus-visible. Always pair with an aria-label — the tooltip is decorative.

Four directions

<button class="btn tooltip" data-tooltip="Hint" aria-label="Copy">Top</button>
<button class="btn tooltip tooltip--bottom" data-tooltip="Hint">Bottom</button>
<button class="btn tooltip tooltip--left" data-tooltip="Hint">Left</button>
<button class="btn tooltip tooltip--right" data-tooltip="Hint">Right</button>

Icon buttons with tooltip

<button class="btn tooltip" data-tooltip="Edit" aria-label="Edit">
  <svg class="icon icon--md">…</svg>
</button>

Modifiers

Class	Effect
`.tooltip`	Base; tooltip renders above on `[data-tooltip]`.
`.tooltip--top`	Explicit top (same as default).
`.tooltip--bottom`	Tooltip below the element.
`.tooltip--left`	Tooltip to the left.
`.tooltip--right`	Tooltip to the right.

Accessibility: data-tooltip text is not read by AT. Always add aria-label (or visible text) describing the action.