Tooltip

Clarify an unfamiliar control on hover or focus.

Live example

A reviewed public example, isolated from this page.

import { Tooltip } from "heidi-ui";
import "heidi-ui/styles.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

content<div>
The [popover=manual] panel with role=tooltip; anchored to the trigger, hoverable by default, side/align/open state via data attributes.
ARIA role: tooltip
trigger<button>
Hover/focus target; carries the per-instance anchor-name, aria-describedby when open, and the open-state styling contract.
Uses native semantics