Tooltip

A short hint shown on hover or keyboard focus. Defaults to a theme-aware background, border, subtle shadow, no arrow, and an 8px gap. Moving off the trigger closes it, even when the pointer moves onto the tooltip.

Radix UI Source

Preview

Installation

Install the package using your preferred package manager:

npx shadcn@latest add @airy/tooltip

Usage

Import the component from the package:

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

Then use it in your application:

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

Examples

With an arrow

Custom gap

Keyboard shortcut

Hover behavior

Move from each button onto its tooltip to compare. Neither tooltip contains interactive controls.