Tooltip

A popup that appears when an element is hovered or focused, showing a hint for sighted users.

DocsAPI Reference

Installation


pnpm dlx shadcn@latest add @lumi-ui/tooltip

Basic Usage

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

<Tooltip>
  <TooltipTrigger>Hover me</TooltipTrigger>
  <TooltipContent>
    Tooltip
  </TooltipContent>
</Tooltip>

Anatomy

<TooltipProvider>
  <Tooltip>   
    <TooltipTrigger />
    <TooltipContent />
  </Tooltip>
  <Tooltip>   
    <TooltipTrigger />
    <TooltipContent />
  </Tooltip>
</TooltipProvider>

Cookbook

Change Delay

Detached Triggers

Controlled mode with multiple triggers

With Animation