Tooltip

A tooltip displays a description of an element on hover or focus.

Preview

Code

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/tooltip

Anatomy

Single import

Multiple imports

import { Button } from "~/components/ui/button";
import { Tooltip } from "~/components/ui/tooltip";

<Tooltip.Root>
  <Button></Button>

  <Tooltip.Content>
    <p></p>

    <Tooltip.Arrow />
  </Tooltip.Content>
</Tooltip.Root>;

Examples

Positions

Preview

Code

With Arrow

Preview

Code

Preview

Code

Troubleshooting

If tooltip content appears misaligned, in wrong position, or rendered but not visible in viewport, check if body has position: relative; applied. See this issue for more details.

Remove position: relative; from body:

API Reference

Tooltip.Root

Prop	Type	Default
`children`	`ReactNode`
`isDisabled`	`boolean`
`delay`	`number`	`0`
`closeDelay`	`number`	`300`
`trigger`	`"focus"`
`isOpen`	`boolean`
`defaultOpen`	`boolean`
`onOpenChange`	`function`

Tooltip.Content

Prop	Type	Default
`children`	`ReactNode`
`placement`	`Placement`	`"top"`
`offset`	`number`	`8`
`crossOffset`	`number`	`0`
`containerPadding`	`number`	`12`
`shouldFlip`	`boolean`	`true`
`isEntering`	`boolean`
`isExiting`	`boolean`

Tooltip.Arrow

Prop	Type	Default
`className`	`string`

Toggle Forms

On This Page

Installation
Anatomy
Examples
Positions
With Arrow
Hover Card
Troubleshooting
Tooltip positioning issues
API Reference
Tooltip.Root
Tooltip.Content
Tooltip.Arrow

Contribute