Tooltip

Tooltip names or explains a control in a short label shown on hover and keyboard focus. A native hint popover gives the top layer, CSS anchor positioning places it, and a small init() module handles the timing.

Public web API

A focusable trigger with data-bitsy-tooltip-trigger, and a popover="hint" element with role="tooltip" that the trigger points to. There is no wrapper.

<button data-bitsy-button data-bitsy-tooltip-trigger type="button" aria-labelledby="bold-tip">
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z" fill="none" stroke="currentColor" stroke-width="2" /></svg>
</button>
<div data-bitsy-tooltip popover="hint" id="bold-tip" role="tooltip">Bold</div>

<button data-bitsy-button data-bitsy-tooltip-trigger type="button" aria-describedby="save-tip">Save</button>
<div data-bitsy-tooltip popover="hint" id="save-tip" role="tooltip">Save the document (⌘S)</div>

<script type="module">
  import { init } from "@bitsyui/bits/tooltip/init";
  init();
</script>

Use aria-labelledby on an icon-only button so the tooltip is its name. Use aria-describedby on a labelled button.
data-bitsy-placement="bottom" on the tooltip places it below the trigger.
Plain text only. Links and buttons belong in a Popover.

Try it

Tab to a button to show its tooltip at once, or hover for half a second. Escape hides it and keeps focus.

Behavior

Without the script, each trigger still has its name or description and no tooltip shows.
init() shows on keyboard focus at once and on hover after 500ms, shows the next one at once for 300ms after one hides, and hides on blur, click, Escape, and pointer leave (100ms grace, so the pointer can move onto the tooltip).
Escape hides the tooltip without closing a surrounding Menu or Dialog. Touch shows no tooltip.
It marks each trigger with data-bitsy-tooltip-ready and returns a cleanup function.
Motion is a short fade, removed under prefers-reduced-motion: reduce.

Foundation versus Bit

The foundation does not style [popover]. data-bitsy-tooltip adds the small inverted label, placement, and motion. The trigger is any normal control, such as a Button.