TooltipFreev1.0.0

Names every icon, and never makes anyone wait twice: 380ms for the first, then instant along the toolbar, with the shortcut in a key cap. shadcn's Tooltip, cut from Lumen glass.

Built on shadcn/ui

.md

Add to your project

Base UIpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-tooltip.json

Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-tooltip.json

Free, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.

Preview

ShortcutsThe key cap next to each name.

Show one openKeeps New chart's tooltip open until you hover another.

Customize

Try Lumen in your brand. The preview follows on every page; copy the CSS when it's right.

Accent

Corners

Font

/* Lumen as drawn: nothing to change. */

Props

TooltipProvider delay / timeout (Base UI) · delayDuration / skipDelayDuration (Radix)380 / 500
number
Lumen's timing: wait 380ms, then no wait while another tooltip closed under 500ms ago. One provider near the root, as with shadcn.
Tooltip open / defaultOpen / onOpenChange–
boolean / boolean / (open) => void
Control a tooltip, e.g. keep one open on a docs page.
TooltipTrigger render (Base UI) / asChild (Radix)–
ReactElement / boolean
Render as your own element, usually a Lumen Button with size="icon" and an aria-label.
TooltipContent side / align / sideOffset"top" / "center" / 10
"top" | "bottom" | "left" | "right" / "start" | "center" | "end" / number
Where it opens; it rises 4px from that side.
TooltipContent containerdocument.body
HTMLElement | ref
Where it portals to, e.g. inside a scope that sets the Lumen tokens.
className / …–
as shadcn
Everything shadcn's parts take passes through; className merges last with cn.

Anatomy

Same exports, parts and data-slots as shadcn's Tooltip.
Base UI and Radix builds: your components.json picks one.
Pairs with Lumen Button's icon sizes for toolbars.

TooltipProviderdata-slot="tooltip-provider"
Shared timing: 380ms, then none while moving along a toolbar.
Tooltipdata-slot="tooltip"
One tooltip's state.
TooltipTriggerdata-slot="tooltip-trigger"
What it describes, usually a Lumen icon button.
TooltipContentdata-slot="tooltip-content"
The glass pill, with a key cap for a nested kbd.

Part of

This is free. The full Lumen Halo has 120 more pieces.See the theme

Changelog

v1.0.0 · 2026-09-28All 1 entries

v1.0.0 · 2026-09-28
First release: the Glass Icon Button's tooltip rebuilt as shadcn's Tooltip (Base UI and Radix builds); icon buttons are Lumen Button's icon sizes

Keyboard

Tab: Focus the trigger and show its tooltip
Escape: Hide the tooltip

More in Overlays

Dialog

Alert Dialog

Sheet