Tooltip

Open in

Docs

Lorem

Guide

Repo

openDelay

closeDelay

side

sideOffset

align

alignOffset

withTransition

Installation

Usage

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

  <Tooltip>
    <TooltipTrigger>And me</TooltipTrigger>
    <TooltipContent>
      <TooltipArrow />
      <p>Tooltip with arrow</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

API Reference

TooltipProvider

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

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

TooltipTrigger

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

TooltipContent

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

TooltipArrow

Prop	Type	Default
`withTransition?`	`boolean`	`true`
`...props?`	`React.ComponentProps<"svg">`	-

Tooltip

On this page