Tooltip

Short text label shown on hover or keyboard focus. Wrap the trigger and tooltip in TooltipTrigger.

Overlayv0.1.0experimentalWCAG 2.2 AAView spec

import { Button, Tooltip, TooltipTrigger } from "@rdloom/react";

export default function TooltipIconButtonExample() {
  return (
    <TooltipTrigger delay={300}>
      <Button variant="ghost" aria-label="Settings">
        ⚙
      </Button>
      <Tooltip>Settings</Tooltip>
    </TooltipTrigger>
  );
}

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx rdloom add tooltip

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes. It needs react-aria-components; add --install to install them.

Use another registry client

npx shadcn@latest add https://rdloom.vimalbhatt.com/r/tooltip.json

Works, but without upgrade tracking.

Usage

import { Button, Tooltip, TooltipTrigger } from "@rdloom/react";

<TooltipTrigger delay={300}>
  <Button variant="ghost" aria-label="Settings">
    ⚙
  </Button>
  <Tooltip>Settings</Tooltip>
</TooltipTrigger>

Placements

import { Button, Tooltip, TooltipTrigger } from "@rdloom/react";

export default function TooltipPlacementsExample() {
  return (
    <div className="flex flex-wrap gap-3">
      {(["top", "bottom", "start", "end"] as const).map((placement) => (
        <TooltipTrigger key={placement} delay={300}>
          <Button variant="secondary">{placement}</Button>
          <Tooltip placement={placement}>Placed {placement}</Tooltip>
        </TooltipTrigger>
      ))}
    </div>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

Prop	Type	Default
`children`required Tooltip text. Keep it short and non-interactive.	`node`	none
`placement` Preferred side of the trigger.	`"top" \| "bottom" \| "start" \| "end"`	`"top"`
`showArrow` Shows an arrow pointing at the trigger.	`boolean`	`true`

Accessibility

Role tooltip, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Shows on focus
Esc hides

Screen readers announce

Focusing the trigger reads the tooltip text as a description after the trigger's name
The tooltip is not announced as a separate thing to navigate to

What your code must do

Trigger must be focusable
Never the only way to reach important information
Content has no interactive elements

Guidelines

Use it when

Naming icon-only buttons
Brief hints about a control

Avoid it when

Interactive content: use Popover
Essential instructions: show them inline

Don't

Tooltips on disabled controls
Paragraphs of text

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

--rd-color-text-default
--rd-color-surface-default
--rd-radius-control