Command Palette

Search for a command to run...

Tooltip

shadcn/ui

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

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/registry/optics/tooltip";import { Button } from "@/registry/optics/button";<TooltipProvider>	<Tooltip>		<TooltipTrigger asChild>			<Button variant="outline">Hover me</Button>		</TooltipTrigger>		<TooltipContent>			<p>Add to library</p>		</TooltipContent>	</Tooltip></TooltipProvider>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/tooltip.json

Props

<TooltipProvider />
Name
Type
delayDuration
number (default: 400)
skipDelayDuration
number (default: 0)
sharedMode
boolean (default: false)

<Tooltip />
Name
Type
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
disableHoverableContent
boolean
<TooltipTrigger />
Name
Type
asChild
boolean
disableHoverableContent
boolean
<TooltipContent />
Name
Type
className
string
side
"top" | "right" | "bottom" | "left"
sideOffset
number (default: 0)
align
"start" | "center" | "end"
alignOffset
number
variant
"raised" | "ghost" | "outline"
onEscapeKeyDown
(event: KeyboardEvent) => void
onPointerDownOutside
(event: PointerEvent) => void
Toggle Group