Tooltip

Overview

The Tooltip component displays concise, non-essential context when users hover over or focus an element. Use it for short hints and visual labels; use inline text, popover, or toast when the information is required to complete a task.

Usage

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

<Tooltip>
  <TooltipTrigger render={<Button variant="secondary" />}>
    Show tooltip
  </TooltipTrigger>
  <TooltipContent>Helpful context without clutter.</TooltipContent>
</Tooltip>

Examples

Default

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

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

Delay

Use delay when the trigger sits in a dense repeated control surface.

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

export default function Component() {
  return (
    <Tooltip delay={500}>
      <TooltipTrigger render={<Button variant="secondary" />}>
        Delayed tooltip
      </TooltipTrigger>
      <TooltipContent>Shown after a short hover delay.</TooltipContent>
    </Tooltip>
  );
}

Position

Pass position props to TooltipContent when the default top placement is not the best fit.

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

export default function Component() {
  return (
    <div className="flex items-center justify-center gap-4">
      <Tooltip>
        <TooltipTrigger render={<Button variant="secondary" />}>
          Top
        </TooltipTrigger>
        <TooltipContent side="top">Placed above the trigger.</TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger render={<Button variant="secondary" />}>
          Right
        </TooltipTrigger>
        <TooltipContent side="right">Placed to the right.</TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger render={<Button variant="secondary" />}>
          Bottom
        </TooltipTrigger>
        <TooltipContent side="bottom">Placed below the trigger.</TooltipContent>
      </Tooltip>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`delay`	`number`	`0`	Delay before this tooltip opens, in milliseconds.
`open`	`boolean`	-	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean, details: Tooltip.Root.ChangeEventDetails) => void`	-	Callback fired when the open state changes.
`onOpenChangeComplete`	`(open: boolean) => void`	-	Callback fired after open or close animations complete.
`disabled`	`boolean`	`false`	Prevents the tooltip from opening.
`trackCursorAxis`	`"none" \| "x" \| "y" \| "both"`	`"none"`	Tracks the cursor on the selected axis.
`disableHoverablePopup`	`boolean`	`false`	Closes the tooltip when the pointer leaves the trigger.
`children`	`React.ReactNode`	-	Tooltip trigger and content parts.

TooltipTrigger

Prop	Type	Default	Description
`render`	`React.ReactElement`	-	Element that receives hover and focus events, such as `Button`.
`disabled`	`boolean`	`false`	Prevents this trigger from opening the tooltip.
`closeOnClick`	`boolean`	`true`	Closes the tooltip when the trigger is clicked.
`payload`	`unknown`	-	Payload passed to tooltip render-function children.
`className`	`string`	-	Additional classes for the trigger element.

TooltipContent

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"`	`"top"`	Preferred placement relative to the trigger.
`sideOffset`	`number \| OffsetFunction`	`8`	Distance between the trigger and tooltip.
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to the trigger.
`alignOffset`	`number \| OffsetFunction`	`0`	Offset along the alignment axis.
`anchor`	`Element \| VirtualElement \| React.RefObject<Element \| null> \| (() => Element \| VirtualElement \| null)`	-	Custom element or virtual element to position against.
`positionMethod`	`"absolute" \| "fixed"`	`"absolute"`	CSS positioning method for the tooltip positioner.
`className`	`string`	-	Additional classes for the popup surface.
`children`	`React.ReactNode`	-	Tooltip content.

TooltipProvider

Prop	Type	Default	Description
`delay`	`number`	`0`	Shared delay applied to nested tooltips.
`closeDelay`	`number`	-	Shared delay before nested tooltips close.
`timeout`	`number`	`400`	Window where adjacent tooltips open instantly after one was shown.
`children`	`React.ReactNode`	-	Tooltip subtree.

Tooltip

On this page