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.

Tooltip

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

Installation

pnpm dlx shadcn@latest add @optics/tooltip

Props

<Tooltip />
Name
Type
open
any
onOpenChange
any
delay
any
closeDelay
number
timeout
number
defaultOpen
boolean
onOpenChangeComplete
((open: boolean) => void)
disableHoverablePopup
boolean
trackCursorAxis
"none" | "x" | "y" | "both"
triggerId
string
defaultTriggerId
string
payload
object
render
React.ReactElement
keepMounted
boolean
container
HTMLElement | RefObject<HTMLElement>
anchor
(...args) => Element
positionMethod
"absolute" | "fixed"
sideOffset
number
alignOffset
number
sticky
boolean
arrowPadding
number
disableAnchorTracking
boolean

<TooltipTrigger />
Name
Type
onPointerDown
any
onPointerLeave
any
onPointerEnter
any
delay
number
closeDelay
number
timeout
number
defaultOpen
boolean
open
boolean
onOpenChange
(...args) => void
onOpenChangeComplete
((open: boolean) => void)
disableHoverablePopup
boolean
trackCursorAxis
"none" | "x" | "y" | "both"
triggerId
string
defaultTriggerId
string
payload
object
render
React.ReactElement
keepMounted
boolean
container
HTMLElement | RefObject<HTMLElement>
anchor
(...args) => Element
positionMethod
"absolute" | "fixed"
sideOffset
number
alignOffset
number
sticky
boolean
arrowPadding
number
disableAnchorTracking
boolean
<TooltipContent />
Name
Type
side
string(default: top)
sideOffset
number(default: 4)
align
string(default: center)
alignOffset
number(default: 0)
variant
string(default: raised)
onPointerEnter
any
onPointerLeave
any
delay
number
closeDelay
number
timeout
number
defaultOpen
boolean
open
boolean
onOpenChange
(...args) => void
onOpenChangeComplete
((open: boolean) => void)
disableHoverablePopup
boolean
trackCursorAxis
"none" | "x" | "y" | "both"
triggerId
string
defaultTriggerId
string
payload
object
render
React.ReactElement
keepMounted
boolean
container
HTMLElement | RefObject<HTMLElement>
anchor
(...args) => Element
positionMethod
"absolute" | "fixed"
sticky
boolean
arrowPadding
number
disableAnchorTracking
boolean
<TooltipProvider />
Name
Type
delay
number(default: 400)
delayDuration
string(default: undefined)
skipDelayDuration
number(default: 0)
closeDelay
number
timeout
number
defaultOpen
boolean
open
boolean
onOpenChange
(...args) => void
onOpenChangeComplete
((open: boolean) => void)
disableHoverablePopup
boolean
trackCursorAxis
"none" | "x" | "y" | "both"
triggerId
string
defaultTriggerId
string
payload
object
render
React.ReactElement
keepMounted
boolean
container
HTMLElement | RefObject<HTMLElement>
anchor
(...args) => Element
positionMethod
"absolute" | "fixed"
sideOffset
number
alignOffset
number
sticky
boolean
arrowPadding
number
disableAnchorTracking
boolean
Toggle Group