import { Tooltip, TooltipTrigger, TooltipContent } from "@brijbyte/md3-react/tooltip";@import "@brijbyte/md3-react/tooltip.css";MD3 has two tooltips that look and behave nothing alike, so they're built on two different Base UI primitives. The plain tooltip is a small, non-interactive label — built on Base UI Tooltip. The rich tooltip can carry a title, longer supporting text, and an action, and stays open while the pointer is over it — built on Base UI Preview Card, whose hoverable, persistent popup matches the rich tooltip's interactive behavior far better than the plain Tooltip primitive does.
Tooltip holds the open state, TooltipTrigger usually renders an existing control
like an IconButton, and TooltipContent is the portalled surface — positioned above
the trigger by default and repositioned automatically when it would be clipped. Wrap a
group in TooltipProvider so that once one tooltip has opened, its neighbors open
instantly instead of waiting out the full hover delay again; the guidelines also call
for a tooltip to linger briefly (1.5s) after the pointer leaves every trigger, set here
via closeDelay.
import { RichTooltip, RichTooltipTrigger, RichTooltipContent } from "@brijbyte/md3-react/tooltip";
import { Button } from "@brijbyte/md3-react/button";@import "@brijbyte/md3-react/tooltip.css";
@import "@brijbyte/md3-react/button.css";RichTooltip and RichTooltipTrigger mirror the plain tooltip's API, but
RichTooltipContent takes an optional title and action alongside its supporting-text
children. Pass a Button variant="text" as the action so it gets the spec's hover/focus/
press state layer for free. Unlike the plain tooltip, its content is interactive: the
popup stays open while you hover into it, so users can actually click the action.
Hover the gear icon to see it point out a new settings option.
The positioner keeps the tooltip inside its nearest clipping ancestor automatically, flipping side and alignment as an anchor moves toward an edge or corner — no manual placement math required. Hover each paint-tool icon below to see it adapt to its corner.