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)

Badge — Status labels and tags
Tag — Removable and clickable tags, groups with +N
Avatar — User avatars
Separator — Dividers
Button — Buttons in every variant
Icon Button — Icon-only button
Color Mode Switch — Light, dark or system: the choice is saved, painted before the first frame, synced across tabs and cross-faded
Button Group — Grouped buttons
Copy to Clipboard — Copy with confirmation
Icon — Any icon on the kit’s rules: size from the text, the theme’s stroke, RTL mirroring, an accessible name; createIcon and a gallery of 111 icons
Kbd — Keyboard keys and shortcuts: one "mod+k" string shows ⌘K on a Mac and Ctrl+K elsewhere, read aloud as words
Highlight — Search hits marked in text: case and accents ignored, several terms in their own tones, ready-made ranges, the current hit