Tooltip

data-tip="Text" on any element shows a short label above it on hover and on keyboard focus. Keep it to a few words: it is drawn as one line that does not wrap.

Basic

<p style="display:flex;gap:.75rem;flex-wrap:wrap">
  <button data-variant="line" data-tip="Copies the build command">Copy</button>
  <button data-variant="ghost" data-tip="Keyboard: ⌘ K">Commands</button>
</p>

The tip appears on :focus-visible as well as on hover, so it is reachable from the keyboard.

Notes

• The tip is a ::after reading attr(data-tip), so there is no extra element and nothing for a screen reader to meet twice.
• Because it is CSS content, it carries no accessible name: put the real label in the text or in aria-label and use the tip for the extra hint.
• It takes the solid fill, --s72-solid with its -fg text.
• Heatmap cells reposition the tip to grow leftwards, so a tip on the last day cannot widen the grid.