Tooltip

Tooltips clarify controls or compact metadata without carrying essential meaning.

Overview and decision boundary

Use Tooltip to clarify compact controls or truncated metadata.

Do not put buttons, links, or critical content inside Tooltip.

1import { Button, Tooltip, TooltipProvider } from '@nerio-ui/ui/client';23<TooltipProvider>4  <Tooltip label="Copies the share link"><Button>Copy link</Button></Tooltip>5  <Tooltip label="Opens settings"><Button>Settings</Button></Tooltip>6</TooltipProvider>

Installation and imports

Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.

1pnpm exec nerio add tooltip23import { Button, Tooltip, TooltipProvider } from '@nerio-ui/ui/client';

Usage

1import { Button, Tooltip, TooltipProvider } from '@nerio-ui/ui/client';23<TooltipProvider>4  <Tooltip label="Copies the share link"><Button>Copy link</Button></Tooltip>5  <Tooltip label="Opens settings"><Button>Settings</Button></Tooltip>6</TooltipProvider>

Variants

Variant	Purpose
`Default`	Small text label in the overlay layer.

Anatomy

Slot	Purpose
`content`	Short non-interactive explanation.
`arrow`	Clipped continuation of the overlay surface pointing back to the trigger.

States

State	Purpose
`Visible`	Appears on hover or focus after a short delay.
`Hidden`	Dismisses when trigger loses hover or focus.

Motion

State changes should use shared motion tokens and preserve reduced-motion behavior.

Accessibility

Uses the Base UI Tooltip primitive.
The arrow stays inside the popup and clips its bordered overlay surface toward the trigger.
The arrow is shown by default and can be omitted with showArrow when a plain floating label is more appropriate.
Do not put required information only inside a tooltip.
Keep tooltip text short and specific.
Requires an element trigger. Use a keyboard-focusable control when keyboard users need to discover the tooltip.
Supports hover and keyboard focus behavior through Base UI, plus controlled open and disabled states when needed.
The optional side preference accepts physical or logical placement and retains Base UI collision handling.
The optional sideOffset controls the trigger-to-surface distance and can keep an arrow clear of a containing navigation edge.
Wrap adjacent tooltip triggers in TooltipProvider so their open and close delays are coordinated.

Review the shared responsibility and evidence boundaries in the Accessibility foundation alongside this component-specific contract. Use the Spacing & layout foundation for shared density, wrapping, overflow, reflow, and component-versus-product ownership guidance. The Color foundation, Typography foundation, and Localization foundation define the shared visual-role, text-resilience, direction, and locale boundaries used by component examples.

API

Prop	Purpose
`label`	Short non-essential explanatory content.
`children`	Required trigger element; prefer a keyboard-focusable control.
`disabled`	Prevents tooltip display while preserving the trigger.
`showArrow`	Shows the directional arrow by default; disable it when the positioned surface should remain visually detached from its trigger.
`side`	Preferred physical or logical side of the trigger; collision handling may adjust it when space is constrained.
`sideOffset`	Distance in pixels between the trigger and positioned surface; increase it when an arrow must clear a containing navigation edge.
`TooltipProvider`	Coordinates open and close delays across a group of adjacent tooltip triggers.

Implementation contract

Contract	Value
`Registry item`	tooltip installs 8 source files into the configured components directory.
`Base UI`	tooltip
`Registry dependencies`	None.
`Package dependencies`	@base-ui/react, clsx, react, tailwind-merge, tailwindcss

Styling contract

Contract	Value
`Authoring`	`Complete, statically detectable Tailwind CSS v4 recipes own component visuals.`
`Values`	`Semantic and component --n-* variables remain the canonical customization layer.`
`Overrides`	`Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically.`
`Residual CSS`	`Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer.`

Design notes

Use Tooltip to clarify compact controls or truncated metadata.

Do / do not

Use to name icon-only actions or clarify dense metadata.

Place compact navigation tooltips outward from the navigation surface so they do not cover adjacent actions.

Do not