Tooltip

A short text label that appears on hover or keyboard focus to name an unfamiliar control.

When to use

• Icon-only buttons in toolbars, where the label is otherwise hidden.
• Brief clarifications of a control's effect, a few words long.
• Not for rich or interactive content: use HoverCard (read only) or Popover (interactive). Never put essential instructions only in a tooltip.

Usage

import { Tooltip } from "@/components/iris/tooltip/tooltip";

h(
  Tooltip,
  { content: "Summarize note · 5 credits", side: "top" },
  h("button", { type: "button", "aria-label": "Summarize note" }, sparkleIcon),
);

Props

Prop	Type	Default	Description
content	ReactNode	—	Required. String or number content cross-fades and the bubble resizes when it changes while open.
children	ReactElement	—	Required. A single focusable element that accepts a ref; it becomes the trigger (asChild).
side	"top" | "bottom" | "left" | "right"	"top"	Preferred side; flips on collision.

Notes

• Opens after 250 ms. While any tooltip is open, and for 300 ms after the last closes, the next one opens instantly without travel, so scanning a toolbar feels immediate.
• Each Tooltip brings its own Radix provider; no app-level provider is needed. Open state is internal, so it cannot be forced open from props.
• Keyboard focus opens it and Escape closes it. The trigger still needs its own accessible name (aria-label); the tooltip is supplementary.
• Reduced motion removes the travel and blur.
• Colours come from --ink / --page (an inverted bubble) with --shadow-raised and --radius-control.