Tooltip

A popup that displays information on hover.

Installation

bash
npx shadcn@latest add tooltip

Import

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

Setup

Wrap your app (or layout) with <TooltipProvider> once.

<TooltipProvider>  {/* your app */}</TooltipProvider>

Basic

<Tooltip>  <TooltipTrigger asChild>    <Button variant="outline">Hover me</Button>  </TooltipTrigger>  <TooltipContent>    <p>This is a tooltip</p>  </TooltipContent></Tooltip>

Custom Delay

<Tooltip delayDuration={100}>  <TooltipTrigger asChild>    <Button variant="outline">Quick tooltip</Button>  </TooltipTrigger>  <TooltipContent>Appears faster</TooltipContent></Tooltip>

On Disabled Button

<Tooltip>  <TooltipTrigger asChild>    <span tabIndex={0}>      <Button disabled>Disabled</Button>    </span>  </TooltipTrigger>  <TooltipContent>This action is not available yet</TooltipContent></Tooltip>

Disabled buttons need a span wrapper to receive pointer events for the tooltip to work.

Props

Tooltip

PROPTYPEDEFAULTDESCRIPTION
delayDurationnumber700Delay in ms before tooltip appears

TooltipContent

PROPTYPEDEFAULTDESCRIPTION
side"top" | "right" | "bottom" | "left""top"Preferred side of the trigger
sideOffsetnumber4Offset from the trigger