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.
Preview
import { Button, Tooltip } from '@nerio-ui/ui/client';<Tooltip label="Copies the share link"><Button>Copy link</Button></Tooltip>Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add tooltipimport { Button, Tooltip } from '@nerio-ui/ui/client';Usage
import { Button, Tooltip } from '@nerio-ui/ui/client';<Tooltip label="Copies the share link"><Button>Copy link</Button></Tooltip>Variants
| Variant | Purpose |
|---|---|
Default | Small text label in the overlay layer. |
Anatomy
| Slot | Purpose |
|---|---|
content | Short non-interactive explanation. |
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.
- 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.
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. |
Implementation contract
| Contract | Value |
|---|---|
Registry item | tooltip installs 7 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
Do
Use to name icon-only actions or clarify dense metadata.
Do not
Do not put buttons, links, or critical content inside Tooltip.
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-tooltip-radius | Public customization point for this component contract. |
--n-overlay-z-index | Public customization point for this component contract. |
--n-overlay-background | Public customization point for this component contract. |
--n-overlay-border | Public customization point for this component contract. |
--n-overlay-foreground | Public customization point for this component contract. |
--n-overlay-surface-filter | Public customization point for this component contract. |
--n-overlay-shadow | Public customization point for this component contract. |
--n-motion-overlay-enter-duration | Public customization point for this component contract. |
--n-motion-overlay-enter-easing | Public customization point for this component contract. |
--n-motion-overlay-exit-duration | Public customization point for this component contract. |
--n-motion-overlay-exit-easing | Public customization point for this component contract. |