Tooltip

Overview

The Tooltip component displays helpful information or context when users hover over or focus on an element, providing a non-intrusive way to show additional details without cluttering the interface.

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
  Button,
} from "@tilt-legal/cubitt-components/primitives";

<Tooltip delay={400}>
  <TooltipTrigger>
    <Button variant="secondary">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>This is a tooltip</p>
  </TooltipContent>
</Tooltip>

Tooltips show immediately by default. Pass delay={number} (milliseconds) to Tooltip to debounce hover interactions.

Examples

Basic text tooltip

import {
  Button,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@tilt-legal/cubitt-components/primitives";

export default function Component() {
  return (
    <Tooltip>
      <TooltipTrigger render={<Button variant="secondary">Hover me</Button>} />
      <TooltipContent>Helpful context without clutter.</TooltipContent>
    </Tooltip>
  );
}

Icon-only controls with hover delay

Use the delay prop to soften frequent hover interactions, especially in icon rows.

import {
  Button,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@tilt-legal/cubitt-components/primitives";
import { Bell, CircleInfo } from "@tilt-legal/cubitt-icons/ui/outline";

export default function Component() {
  return (
    <div className="flex items-center gap-4">
      <Tooltip delay={400}>
        <TooltipTrigger
          render={
            <Button variant="ghost" size="icon">
              <Bell />
            </Button>
          }
        />
        <TooltipContent side="bottom">
          Notifications stay muted for 1 hour.
        </TooltipContent>
      </Tooltip>

      <Tooltip delay={400}>
        <TooltipTrigger
          render={
            <Button variant="ghost" size="icon">
              <CircleInfo />
            </Button>
          }
        />
        <TooltipContent side="bottom" align="end">
          Hover delay avoids accidental popovers.
        </TooltipContent>
      </Tooltip>
    </div>
  );
}

API Reference

Prop	Type	Description
`delay`	`number`	Time in milliseconds before the tooltip opens. Defaults to `0`.
`open`	`boolean`	Controlled open state.
`defaultOpen`	`boolean`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	Callback fired when the open state changes.
`disabled`	`boolean`	Prevents the tooltip from showing.
`animated`	`boolean`	Enables or disables the default open/close animation.
`className`	`string`	Additional classes passed to the tooltip root.

TooltipTrigger

Prop	Type	Description
`render`	`React.ReactElement`	The element that receives hover/focus events (e.g., a `Button`).
`className`	`string`	Additional classes for the trigger wrapper.

TooltipContent

Prop	Type	Description
`side`	`"top"` \| `"right"` \| `"bottom"` \| `"left"`	Placement relative to the trigger.
`sideOffset`	`number`	Gap between the trigger and tooltip. Defaults to `8`.
`align`	`"start"` \| `"center"` \| `"end"`	Alignment relative to the trigger.
`alignOffset`	`number`	Offset adjustment for `align`.
`className`	`string`	Additional classes for the popup surface.

TooltipProvider

Prop	Type	Description
`delay`	`number`	Default delay applied to nested tooltips (milliseconds).

Wrap a subtree in TooltipProvider to set a global delay without passing it to every Tooltip.

Tooltip

On this page