Tooltip
A control's name, shown beside it: a small ink label for an icon that stands alone. It opens after the hover intent delay and at once on keyboard focus, and goes as soon as the pointer leaves.
An icon button
import { Tooltip } from "@/components/shared/tooltip";
<Tooltip label={t("inbox")}>
<Button variant="ghost" iconOnly leadingIcon={Inbox} aria-label={t("inbox")} />
</Tooltip>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | The name it shows. |
| side | "top" | "right" | "bottom" | "left" | "right" | Where it opens beside the control; it flips where there's no room. |
| children | ReactElement | — | The control: one element, which takes the trigger's props. |
| TooltipGroup | { handle, side? } — with useTooltipGroup() | — | One label for a row of controls: it opens on the first after the intent delay, then glides from one to the next on duration-fast, its words changing as it goes. The NavRail's. |
| TooltipGroupTrigger | { handle, label, children } | — | A control in the group, named label. |
Guidelines
- A row of icons shares one TooltipGroup, so the name glides along with the pointer instead of closing and opening at each.
- A name, not a sentence — and never the only one: the control keeps its own aria-label.
- Nothing a phone needs: there's no hover there, so a tooltip can only add to what's already said.