Components

Tooltip

A tiny helper overlay for labels, shortcuts, and microcopy that should stay out of the main layout.

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

Run the registry command below to add tooltip to your project.

watermelon add tooltip

Import Tooltip from your local UI registry output.

Import

import { Tooltip } from "@/components/ui/tooltip";

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

Tooltips work best for brief explanations, labels, and shortcut hints.

prop	type	default	description
defaultOpen	boolean	false	Sets the initial open state for uncontrolled tooltips.
open	boolean	-	Controls tooltip visibility from parent state.
onOpenChange	(open: boolean) => void	-	Called whenever the tooltip opens or closes.
asChild	boolean	false	Forwards tooltip interactions into an existing child trigger.