Tooltip

A hint shown on hover or focus.

Installation

import { Tooltip } from "~/components/ui/Tooltip";

Usage

<Tooltip content="Add a worker">
  <Button variant="outline" size="sm">Hover me</Button>
</Tooltip>

API reference

PropTypeDefaultDescription
childrenReactElement-The trigger element (hover/focus target).
contentReactNode-The tooltip content.

Accessibility

  • Built on the Base UI Tooltip primitive: shows on hover and keyboard focus, hides on Escape.
  • Pair with a trigger that has an accessible label; tooltips supplement, not replace, labels.
View site