Tooltip

An animated tooltip that shows contextual info on hover or focus and smoothly glides to the next element without disappearing between transitions.

Open in

openDelay

closeDelay

side

sideOffset

align

alignOffset

arrow

Installation

Usage

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover me</TooltipTrigger>
    <TooltipContent>Tooltip content</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger>And me</TooltipTrigger>
    <TooltipContent>Tooltip content</TooltipContent>
  </Tooltip>
</TooltipProvider>

Props

TooltipProvider

Prop	Type	Default
`transition?`	`Transition`	`{ type: 'spring', stiffness: 300, damping: 25 }`
`closeDelay?`	`number`	`300`
`openDelay?`	`number`	`700`
`children`	`React.ReactNode`	-

Prop	Type	Default
`alignOffset?`	`number`	-
`align?`	`"start" \| "center" \| "end"`	`center`
`sideOffset?`	`number`	`4`
`side?`	`"top" \| "bottom" \| "left" \| "right"`	`top`
`children`	`React.ReactNode`	-

TooltipContent

Prop	Type	Default
`children`	`React.ReactNode`	-

TooltipTrigger

Prop	Type	Default
`children`	`React.ReactElement`	-

Credits

We take our inspiration from Shadcn UI for the tooltip style.

Tooltip

On this page