Tooltip · paneui

Installation

pnpm dlx shadcn@latest add @paneui/tooltip

Usage

import { Tooltip, TooltipContent, TooltipKbd, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="secondary" size="icon" aria-label="Copy" />}>
      <CopyIcon />
    </TooltipTrigger>
    <TooltipContent>
      Copy <TooltipKbd>⌘C</TooltipKbd>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Composition

TooltipProvider
└── Tooltip
    ├── TooltipTrigger
    └── TooltipContent
        └── TooltipKbd

Examples

Sides

Align

With Icon

Delay

Motion

The tooltip scales from 90% and nudges 4px toward the trigger over 150ms. Moving between triggers in the same provider shows the next one instantly.

Accessibility

Tooltips open on hover and keyboard focus, and close with Esc. Keep essential information out of tooltips, since touch users can't hover.

API Reference

Built on the Tooltip primitive. Only the props this library adds or changes are listed; everything else passes through.

TooltipProvider

Shares the open delay between tooltips. The docs app wraps everything in one. Also accepts every prop of Tooltip.Provider.

delay= 300: number; Milliseconds before a tooltip opens.
closeDelay: number; Milliseconds before it closes.

Prop	Type	Default	Description
delay	number	300	Milliseconds before a tooltip opens.
closeDelay	number	—	Milliseconds before it closes.

Re-export of the primitive root. Also accepts every prop of Tooltip.Root.

open: boolean; Controlled open state.
onOpenChange: (open: boolean, eventDetails) => void; Called when the tooltip opens or closes.

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
onOpenChange	(open: boolean, eventDetails) => void	—	Called when the tooltip opens or closes.

TooltipTrigger

Re-export. Use render to make a Button the trigger. Also accepts every prop of Tooltip.Trigger.

TooltipContent

Portal, positioner and popup in one. Also accepts every prop of Tooltip.Popup.

side= "top": "top" | "right" | "bottom" | "left" | "inline-start" | "inline-end"; Side of the trigger to open on. Passed to the positioner.
sideOffset= 8: number; Gap from the trigger in px.
align= "center": "start" | "center" | "end"; Alignment against the trigger.

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"	"top"	Side of the trigger to open on. Passed to the positioner.
sideOffset	number	8	Gap from the trigger in px.
align	"start" \| "center" \| "end"	"center"	Alignment against the trigger.

data-side: The side it actually opened on, after collision handling.
data-instant: Present when it opens without animation (moving between triggers).

Data attribute	Description
data-side	The side it actually opened on, after collision handling.
data-instant	Present when it opens without animation (moving between triggers).

TooltipKbd

Small keycap for a shortcut, pulled to the trailing edge. Also accepts every prop of kbd.