Tooltip v0.2.5 · @behivetech

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/atoms.icon";
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

Prop	Type	Default	Description
`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.
`className`	`string`	—	Additional class names to merge with the tooltip content element
`side`	`"top" \| "right" \| "bottom" \| "left"`	`top`	Which side of the trigger to place the tooltip on; defaults to "top"

Usage

Disabled triggers

Examples

Properties

Tooltip props

`Tooltip` props