Tooltip

Provides brief contextual information or hints when hovering or focusing on an element.

I am a tooltip!

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/Tooltip

Usage

import { Button } from "@/registry/default/displayui/Button"
import { Tooltip } from "@/registry/default/displayui/Tooltip"

<Tooltip.Root>
  <Tooltip.Trigger>
    <Button>Hover me</Button>
  </Tooltip.Trigger>
  <Tooltip.Content content="I am a tooltip!" position="simple" />
</Tooltip.Root>

API

For Tooltip Root

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	Wraps the tooltip trigger and content. Provides the hover group context required for tooltip visibility.	-
className	`string`	Additional CSS classes to customize the tooltip root container styling.	-

For Tooltip Trigger

Attribute	Type	Description	Default
children	`ReactNode`	Element that triggers the tooltip on hover.	-
className	`string`	Additional CSS classes to customize the tooltip trigger styling.	-

For Tooltip Content

Attribute	Type	Description	Default
content	`ReactNode`	Content displayed inside the tooltip.	-
position	`"top" \| "bottom" \| "left" \| "right" \| "simple"`	Controls the placement of the tooltip relative to the trigger.	"top"
className	`string`	Additional CSS classes to customize the tooltip content styling.	-