Atelier UI

Search components…

Search components…

Tooltip

Lightweight tooltip with four sides, show delay and keyboard focus support.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

TooltipProps

Also accepts all props of Omit<React.ComponentProps<"span">, "content">

PropTypeDefaultDescription
content* requiredReact.ReactNode——
sideSide"top"—
delaynumber300Delay before showing, in ms
showArrowbooleantrue—
openboolean—Keep the tooltip visible (useful for docs and previews)

Install

$ npx shadcn@latest add https://chromotion.dev/r/tooltip.json

The CLI installs the base component; your customizations live in the code generated on the Customize tab.

More like this