Tooltip

Open in

openDelay

closeDelay

side

sideOffset

align

alignOffset

Installation

Usage

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Tooltip content</p>
    </TooltipContent>
  </Tooltip>

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

API Reference

TooltipProvider

Animate UI API Reference - TooltipProvider Primitive

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

Animate UI API Reference - Tooltip Primitive

Prop	Type	Default
`children`	`React.ReactNode`	-
`side?`	`Side`	`top`
`sideOffset?`	`number`	`10`
`align?`	`Align`	`center`
`alignOffset?`	`number`	`0`

TooltipTrigger

Animate UI API Reference - TooltipTrigger Primitive

Prop	Type	Default
`asChild?`	`boolean`	`false`
`...props?`	`HTMLMotionProps<"div">`	-

TooltipContent

Animate UI API Reference - TooltipContent Primitive

Prop	Type	Default
`layout?`	`boolean \| "position" \| "size" \| "preserve-aspect"`	`preserve-aspect`
`...props?`	`HTMLMotionProps<"div">`	-

Credits

Credit to shadcn/ui for style inspiration.

Tooltip

On this page