ComponentsOverlays & feedback

Tooltip

A short label for icon buttons, abbreviations and disabled actions. Opens on hover and keyboard focus, shows an optional shortcut, never blurs and never shows on touch screens.

Radix Tooltip components/tooltip.tsx, components/button.tsx, lib/floating-arrow.tsxtheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Tooltip, TooltipProvider, IconButton } from "@vamos-ui/react";

// once, at the app root (App shell ships it)
<TooltipProvider>{children}</TooltipProvider>

<Tooltip content="Edit post" shortcut="mod+e">
  <Button>Edit</Button>
</Tooltip>

// inside a provider, IconButton shows its label as a tooltip
<IconButton label="Delete post"><Trash2 /></IconButton>

Tooltips are hidden on touch-only devices (hover: none), so never put information only in a tooltip. IconButton's label is already its accessible name.

The trigger gets aria-describedby pointing at the tooltip. Focus opens it, Escape closes it.

Without a TooltipProvider, IconButton falls back to the native title attribute, so existing code keeps working.

If the content has links or inputs, use Popover instead.

Examples

Keyboard shortcut

shortcut renders platform-aware keycaps: ⌘ K on Apple devices, Ctrl K elsewhere.

Sides and arrow

side picks the preferred edge; Radix flips it when there is no room. arrow adds a pointer.

Explaining a disabled action

Disabled buttons fire no events, so the trigger is wrapped in a focusable span automatically.

Hover or tab to the button to see why.

Tones and inline triggers

inverted (default) is an opaque chip that stays readable on glass; default uses the floating-layer surface for longer hints.

Net revenuePublicBilled in UTC

Table row actions

A CMS post list: every IconButton inside the provider labels itself.

Spring menu: five new small plates

Leyla Aksoy

Published

How we cut delivery times by 18%

Daniel Okafor

Draft

Behind the bar with our head mixologist

Mira Castell

Scheduled

API

Tooltip

PropTypeDefault
content
Tooltip text. Empty or null renders the trigger alone.
ReactNode—
children
The trigger, rendered with asChild. Must accept a ref.
ReactElement—
shortcut
Shortcut hint shown with Kbd, e.g. "mod+e" or ["mod", "enter"].
string | string[]—
side
Preferred side.
"top" | "right" | "bottom" | "left""top"
align
Alignment against the trigger.
"start" | "center" | "end""center"
tone
inverted: opaque high-contrast chip. default: floating-layer surface.
"inverted" | "default""inverted"
arrow
Show the pointer arrow.
booleanfalse
delay
Open delay in ms; overrides the provider (400 ms).
number—
disabled
Render the trigger without a tooltip.
booleanfalse
open / defaultOpen / onOpenChange
Controlled or uncontrolled open state.
boolean / boolean / (open) => void—
sideOffset
Gap to the trigger in px.
number6

TooltipProvider

PropTypeDefault
delayDuration
Hover time before a tooltip opens.
number400
skipDelayDuration
Window in which the next tooltip opens instantly.
number300
disableHoverableContent
Close as soon as the pointer leaves the trigger.
booleanfalse

TooltipRoot · TooltipTrigger · TooltipContent

PropTypeDefault
TooltipRoot
Compound root; adds a provider when none is present.
Radix Tooltip.Root props—
TooltipTrigger
Use asChild with your own element.
Radix Tooltip.Trigger props—
TooltipContent
Portals into the nearest ThemeScope, z-index --z-tooltip.
tone · arrow · shortcut · side · align · sideOffset—

IconButton (tooltip props)

PropTypeDefault
tooltip
Inside a TooltipProvider the label shows as a Tooltip; a string shows different text; false keeps the native title.
boolean | stringtrue
tooltipSide
Side of the tooltip.
"top" | "right" | "bottom" | "left""top"
shortcut
Shortcut hint in the tooltip.
string | string[]—
Previous
Toast
Next
Top bar