Tooltip

PreviousNext

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Docs API Reference 
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip"

export function TooltipDemo() {
  return (
    <TooltipTrigger>
      <Button variant="outline">Hover</Button>
      <Tooltip>Add to library</Tooltip>
    </TooltipTrigger>
  )
}

Installation

pnpm dlx shadcn@latest add tooltip

Usage

import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip"
<TooltipTrigger>
  <Button>Hover</Button>
  <Tooltip>Add to library</Tooltip>
</TooltipTrigger>

Examples

Default

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

export function TooltipDemo() {
  return (
    <TooltipTrigger>
      <Button variant="outline">Hover</Button>
      <Tooltip>Add to library</Tooltip>
    </TooltipTrigger>
  )
}

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

With Icon Button

import { InfoIcon } from "lucide-react"

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

export function TooltipIcon() {
  return (
    <TooltipTrigger>
      <Button size="icon" variant="outline" aria-label="Information">
        <InfoIcon className="size-4" />
      </Button>
      <Tooltip>Get more information</Tooltip>
    </TooltipTrigger>
  )
}

import { InfoIcon } from "lucide-react"
 
<TooltipTrigger>
  <Button size="icon" variant="outline" aria-label="Information">
    <InfoIcon className="size-4" />
  </Button>
  <Tooltip>Get more information</Tooltip>
</TooltipTrigger>

Placement

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

export function TooltipPlacement() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4">
      <TooltipTrigger>
        <Button variant="outline">Top</Button>
        <Tooltip placement="top">Tooltip on top</Tooltip>
      </TooltipTrigger>

      <TooltipTrigger>
        <Button variant="outline">Bottom</Button>
        <Tooltip placement="bottom">Tooltip on bottom</Tooltip>
      </TooltipTrigger>

      <TooltipTrigger>
        <Button variant="outline">Left</Button>
        <Tooltip placement="left">Tooltip on left</Tooltip>
      </TooltipTrigger>

      <TooltipTrigger>
        <Button variant="outline">Right</Button>
        <Tooltip placement="right">Tooltip on right</Tooltip>
      </TooltipTrigger>
    </div>
  )
}

You can control the placement of the tooltip using the placement prop.

<TooltipTrigger>
  <Button variant="outline">Top</Button>
  <Tooltip placement="top">Tooltip on top</Tooltip>
</TooltipTrigger>
 
<TooltipTrigger>
  <Button variant="outline">Bottom</Button>
  <Tooltip placement="bottom">Tooltip on bottom</Tooltip>
</TooltipTrigger>
 
<TooltipTrigger>
  <Button variant="outline">Left</Button>
  <Tooltip placement="left">Tooltip on left</Tooltip>
</TooltipTrigger>
 
<TooltipTrigger>
  <Button variant="outline">Right</Button>
  <Tooltip placement="right">Tooltip on right</Tooltip>
</TooltipTrigger>

Custom Delay

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

export function TooltipDelay() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4">
      <TooltipTrigger delay={0}>
        <Button variant="outline">No delay</Button>
        <Tooltip>Appears immediately</Tooltip>
      </TooltipTrigger>

      <TooltipTrigger delay={500}>
        <Button variant="outline">500ms delay</Button>
        <Tooltip>Appears after 500ms</Tooltip>
      </TooltipTrigger>

      <TooltipTrigger delay={1000}>
        <Button variant="outline">1000ms delay</Button>
        <Tooltip>Appears after 1 second</Tooltip>
      </TooltipTrigger>
    </div>
  )
}

Control when the tooltip appears using the delay and closeDelay props.

<TooltipTrigger delay={0}>
  <Button variant="outline">No delay</Button>
  <Tooltip>Appears immediately</Tooltip>
</TooltipTrigger>
 
<TooltipTrigger delay={500}>
  <Button variant="outline">500ms delay</Button>
  <Tooltip>Appears after 500ms</Tooltip>
</TooltipTrigger>
 
<TooltipTrigger delay={1000}>
  <Button variant="outline">1000ms delay</Button>
  <Tooltip>Appears after 1 second</Tooltip>
</TooltipTrigger>

API Reference

TooltipTrigger

TooltipTrigger wraps the element that triggers the tooltip and the tooltip itself.

PropTypeDefaultDescription
delaynumber500The delay time for the tooltip to show up in milliseconds
closeDelaynumber0The delay time for the tooltip to close in milliseconds
isDisabledbooleanfalseWhether the tooltip is disabled
trigger'focus'nullBy default, opens for both focus and hover. Can be set to "focus" to only open on focus

Tooltip

Tooltip is the content component that displays the tooltip message.

PropTypeDefaultDescription
placementPlacement'top'The placement of the tooltip relative to the trigger
offsetnumber10The offset of the tooltip from the trigger
containerPaddingnumber12The padding between the tooltip and the edge of the viewport

Changelog

2025-10-26 Migrate to React Aria Components

We've migrated the tooltip component from Radix UI to React Aria Components for better accessibility and animation support.

Breaking Changes:

  1. Component Structure: The component structure has changed:

Old (Radix UI):

<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>

New (React Aria):

<TooltipTrigger>
  <Button>Hover</Button>
  <Tooltip>Add to library</Tooltip>
</TooltipTrigger>

  1. Props: Some prop names have changed:

    • sideOffset → offset
    • side → placement
    • No need for asChild prop anymore

  2. Dependencies: Update your dependencies:

    • Remove: @radix-ui/react-tooltip
    • Add: react-aria-components and tailwind-variants