Tooltip

Clarify an unfamiliar control on hover or focus.

Live example

A reviewed public example, isolated from this page.

import {
  TooltipRoot,
  TooltipContent,
  TooltipTrigger,
} from "heidi-ui/tooltip";
import "heidi-ui/tooltip/base.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