Tooltip

Hover and focus hints. Free, MIT · Basics › Labels and tooltips

Installation

npx valyro-cli@latest add tooltip

npx shadcn@latest add https://valyro.xyz/r/tooltip.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Tooltip } from 'valyro-ui';

Prop	Type	Default
`content`	`ReactNode`		Tooltip text or content; nothing shows while it is empty. Or `Tooltip.Content` in the children.
`children` *	`ReactElement \| ReactElement[]`		A single focusable element. It receives the hover/focus handlers and aria-describedby. In the compound form, a `Tooltip.Trigger` and a `Tooltip.Content` instead.
`placement`	`Placement`	`'top'`	Preferred side and alignment relative to the trigger; flips when there is no room.
`delay`	`number`	`400`	Delay before showing, ms. Skipped while another tooltip was just visible.
`disabled`	`boolean`	`false`	Never show the tooltip; the trigger keeps working.
`arrow`	`boolean`	`false`	Small pointer towards the trigger.
`animation`	`'fade' \| 'spring'`	`'fade'`	`fade` (default) or `spring`: springs out of the trigger's side, and moving straight on to the next spring tooltip glides the tooltip across instead of fading one out and another in.
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`className`	`string`		Class for the tooltip surface.

Tooltip.Trigger (TooltipTrigger), Tooltip.Content (TooltipContent)