Tooltip

v0.2.6
Stable

Names a control on hover and on keyboard focus, built on [`@radix-ui/react-tooltip`](https://www.radix-ui.com/primitives/docs/components/tooltip).

pnpm add @behivetech/atoms.tooltip

This is the snapshot of v0.2.6, the current version, as recorded on 2026-11-10. The live page runs its examples →

Names a control on hover and on keyboard focus, built on @radix-ui/react-tooltip.

Intended for icon-only controls, where the tooltip is the only thing naming the control. It replaces the title attribute, which delays about a second, is OS-styled with no theming, has no touch support, and gives no control over placement.

Usage

1import { Tooltip } from "@behivetech/atoms.tooltip";
2import { BoxIcon } from "@behivetech/icons.box";
3

4<Tooltip label="Rectangle" side="right">
5  <button type="button">
6    <BoxIcon />
7  </button>
8</Tooltip>;

The child is rendered as-is via Radix's asChild, so the trigger stays your own element. Tooltip mounts its own provider — you do not need to add one.

Disabled triggers

A disabled element fires no pointer events, so a bare Radix tooltip never opens on one. That is the moment a tooltip matters most: when a control is unavailable and the user wants to know why.

Tooltip handles it. When the child is disabled it is wrapped in a focusable span that carries the listeners, and the child is made pointer-transparent so hover lands on the wrapper. The control stays disabled, keeps its own accessible name, and the explanation is reachable by keyboard and screen reader.

1<Tooltip label="You do not have permission to edit roads">
2  <button type="button" disabled>
3    <RoadIcon />
4  </button>
5</Tooltip>

No wrapper is added when the trigger is enabled.

Examples

Open all 3 →
Basic Tooltip
1const BasicTooltip = () => (
2  <Tooltip label="Rectangle">
3    <button type="button">Rect</button>
4  </Tooltip>
5);
6

7render(<BasicTooltip />);
Tooltip Sides
1const TooltipSides = () => (
2  <div style={{ display: "flex", gap: "1.5rem", padding: "3rem" }}>
3    <Tooltip label="Above" side="top">
4      <button type="button">Top</button>
5    </Tooltip>
6    <Tooltip label="To the right" side="right">
7      <button type="button">Right</button>
8    </Tooltip>
9    <Tooltip label="Below" side="bottom">
10      <button type="button">Bottom</button>
11    </Tooltip>
12    <Tooltip label="To the left" side="left">
13      <button type="button">Left</button>
14    </Tooltip>
15  </div>
16);
17

18render(<TooltipSides />);

Properties

Tooltip props

PropTypeDefaultDescription
children*ReactElement<unknown, string | JSXElementConstructor<any>>—The element the tooltip describes — rendered as-is via Radix's `asChild`
label*string—Text shown in the tooltip. This is the control's name when the trigger is icon-only.
classNamestring—Additional class names to merge with the tooltip content element
side"top" | "right" | "bottom" | "left"topWhich side of the trigger to place the tooltip on; defaults to "top"