Overlays

Tooltip

A short label on hover or focus, dark with an arrow. Each Tooltip brings its own provider, with no delay.

packages/design-system/components/ui/tooltip.tsx

Examples

On an icon button. Hover it

Sides

Anatomy

01Trigger
02Popup, foreground fill, text-xs
03Arrow

Usage

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

<Tooltip>
  <TooltipTrigger render={<Button size="icon" variant="outline" aria-label="Add" />}>
    <PlusIcon />
  </TooltipTrigger>
  <TooltipContent>Add a block</TooltipContent>
</Tooltip>

Props

Prop	Type	Default	Description
TooltipTrigger render	ReactElement \| (props, state) => ReactElement	none	Base UI's replacement for asChild: render the part as another element, such as a Button or a Link.
side	"top" \| "bottom" \| "left" \| "right" \| "inline-start" \| "inline-end"	none	Which side of the trigger the popup opens on.
align	"start" \| "center" \| "end"	"center"	How the popup lines up with the trigger along that side.
sideOffset	number	4	The gap between trigger and popup, in pixels.
TooltipProvider delay	number	0	Every Tooltip is wrapped in a provider already. Wrap a group in your own to share a delay.
className	string	none	Merged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Name icon-only buttons with it, and keep the aria-label too.

Don't

Put anything clickable or essential in it; touch screens never see it.