Tooltip

Preview

Installation

npx shadcn@latest add @cubby-ui/tooltip

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/cubby-ui/tooltip";

<Tooltip>
  <TooltipTrigger />
  <TooltipContent />
</Tooltip>

Examples

Detached Trigger

Use createTooltipHandle() to link a trigger outside the Tooltip component.

Controlled

Control the tooltip's open state externally using the open and onOpenChange props.

Animated Transitions

Animate the tooltip when switching between multiple triggers with different payloads.

API Reference

The Tooltip component is built on top of Base UI's Tooltip. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Tooltip documentation.

Utilities

createTooltipHandle

A function to create a handle for connecting detached triggers to a tooltip. Useful when the trigger needs to be placed outside the Tooltip component.

import { createTooltipHandle } from "@/registry/default/tooltip/tooltip";
 
// Without payload typing
const handle = createTooltipHandle();
 
// With payload typing
const handle = createTooltipHandle<{ title: string }>();

Props

TooltipContent

Composed component for common tooltip layouts. Combines Tooltip.Portal, Tooltip.Positioner, and Tooltip.Popup. Optionally renders Tooltip.Arrow. Props are forwarded to the Positioner and Popup components.

Modified Defaults

Our implementation changes the following Base UI prop defaults:

• TooltipContent: sideOffset defaults to 8 (Base UI defaults to 0)
• TooltipContent: collisionPadding defaults to 10 (Base UI defaults to 5)