Tooltip

An interactive, animated popup that displays information related to an element when it receives keyboard focus or when the mouse hovers over it.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/tooltip.json

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

<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>
    <p>Isn't it cool?</p>
  </TooltipContent>
</Tooltip>

An interactive, animated popup that displays information related to an element when it receives keyboard focus or when the mouse hovers over it.

Property	Type	Default	Description
`delayDuration`	number	`0`	Time in milliseconds to wait before showing the tooltip. Used in TooltipProvider.
`children`	ReactNode	`required`	Content of the tooltip or the trigger element.
`sideOffset`	number	`0`	Distance in pixels between the trigger and the tooltip. Used in TooltipContent.
`asChild`	boolean	`false`	If true, renders children without wrapping them in a default element. Used in TooltipContent.
`className`	string	`-`	Custom CSS classes applied to TooltipContent.
`...props`	any	`-`	Other props supported by Radix Tooltip primitives (Root, Trigger, Content, Provider).