Tooltip

Hover and focus hints on four sides.

Installation#

npx shadcn@latest add https://get-neonkit.vercel.app/r/tooltip.json

import { Tooltip } from "@/components/ui/tooltip"

<Tooltip content="Bold ⌘B">
  <Button size="icon" aria-label="Bold"><Bold /></Button>
</Tooltip>

Pass a palette name or any hex value to color.

Disabled buttons get no pointer or focus events, so wrap them in a focusable span.

Tooltips stay on one line by default. Set a max width and whitespace-normal through className to wrap.

Usage-based billing

Other props, including className, go to the tooltip bubble.

Prop	Type	Default
`content`	`ReactNode` What the tooltip says. Keep it short and non-interactive.	`—`
`children`	`ReactElement` The trigger. A single element that accepts focus and aria-describedby.	`—`
`side`	`"top" \| "right" \| "bottom" \| "left"` Side of the trigger the tooltip appears on.	`"top"`
`align`	`"start" \| "center" \| "end"` Alignment along that side.	`"center"`
`delay`	`number` Milliseconds before opening on hover. Focus opens immediately and closing is always immediate.	`300`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	`inherited`
`disabled`	`boolean` Never opens.	`false`
`open`	`boolean` Controlled open state.	`—`
`defaultOpen`	`boolean` Initial state when uncontrolled.	`false`
`onOpenChange`	`(open: boolean) => void` Called when the tooltip wants to open or close.	`—`

The trigger gets aria-describedby pointing at the tooltip while it's open.
Opens on mouse hover and keyboard focus, never on touch, so don't put anything essential in a tooltip.
Escape, blur, pointer down and leaving the trigger all close it; you can move the pointer onto the tooltip without it closing.
Positioned with CSS, not measured: it won't flip at the viewport edge and an overflow-hidden ancestor will clip it.