Tooltip

Installation

Install the dependencies:

npm install @base-ui/react

Copy the source into components/ui/tooltip.tsx. Registry items that depend on it install it automatically.

components/ui/tooltip.tsx

Usage

import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <Tooltip>
      <TooltipTrigger render={<Button variant="outline">Hover me</Button>} />
      <TooltipContent>Copy message</TooltipContent>
    </Tooltip>
  );
}

Examples

Icon buttons

A tooltip earns its place when the control is an icon alone; written labels do not need one.

API Reference

The parts wrap Base UI's Tooltip primitives and accept their props.

TooltipContent

TooltipContentProps

side : "top" | "right" | "bottom" | "left" = "top": Preferred side of the trigger.
sideOffset : number = 4: Distance from the trigger in pixels.

TooltipProvider

Wrap a region to share hover delay across its tooltips.

TooltipProviderProps

delay ?: number: Milliseconds before the tooltip opens.