Components

Tooltip

A short hint shown on hover or focus.

Installation

npx shadcn@latest add @blank/tooltip

Usage

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

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover</Button>
  </TooltipTrigger>
  <TooltipContent>Add to library</TooltipContent>
</Tooltip>

Examples

Sides

side picks the preferred edge; the tooltip flips to the opposite one when there is no room.

Title and description

TooltipTitle and TooltipDescription give a short explanation. A tooltip is a pill on one line and rounds to 16px once its text wraps. Anything interactive belongs in a Popover.

API Reference

TooltipProvider

Every Radix Tooltip.Provider prop, with:

Prop	Type	Default
`delayDuration`	`number`	`150`

Every Radix Tooltip.Root prop. Each Tooltip brings its own provider, so it works without one.

TooltipContent

Every Radix Tooltip.Content prop, with:

Prop	Type	Default
`sideOffset`	`number`	`6`

The content is inverted: dark on a light page, light on a dark one.