1. Docs
  3. Components
  5. Tooltip

Tooltip

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

Docs

Installation

npx shadcn@latest add @kanpeki/tooltip

Anatomy

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

With Arrow

Hover Card

API Reference

Root

PropTypeDefault
children
ReactNode
isDisabled
boolean
delay
number
1500
closeDelay
number
500
trigger
'focus'
isOpen
boolean
defaultOpen
boolean
onOpenChange
function
Toggle