Brand logoentauri

Add this component

npx zentauri-ui add tooltip

Accessibility notes

Overlay patterns include focus, dismissal, and semantic roles where the component owns interaction. Verify trigger labels and escape behavior in your flow.

Dependency notes

Static imports do not pull framer-motion. Use the animated entry only when you want motion and have framer-motion installed.

Overlay

Tooltips for contextual hints

Tooltips surface short explanations on hover or focus—icon buttons, truncated labels, and chart markers. Use them in React dashboards and Next.js admin tools with disciplined copy length.

Hover or focus me

Examples

Longer hover delay and danger intent for critical controls.

Slow hover
Delete row

Tooltip variants playground

Pick a content variant, size, width, root position, and animation to preview the tooltip live. Toggle Show output / Show code and the snippet updates to match the selected variant.

Hover · default · md

All variants

Every shipped content variant at a glance. Click any swatch to load it into the playground above.

default
outline
ghost
glass
emerald
indigo
purple
pink
rose
sky
teal
yellow
orange
green
gradient-blue
gradient-green
gradient-red
gradient-yellow
gradient-purple
gradient-teal
gradient-indigo
gradient-pink
gradient-orange
blue
cyan
lime
mint
ocean
sapphire
lavender
ruby
red
slate
zinc
stone
royal
electric
forest
sunset
magenta
crimson
aqua
plum

Tooltip API

Generated from the package prop types and variant definitions.

Tooltip

TooltipProps

State

PropTypeDefault
defaultOpenboolean | undefinednone
onOpenChange((open: boolean) => void) | undefinednone
openboolean | undefinednone

Behavior

PropTypeDefault
delaynumber | undefinednone
positionTooltipPosition | undefinednone

Content

PropTypeDefault
children*ReactNodenone

TooltipContent

TooltipContentProps

Behavior

PropTypeDefault
size'md' | 'sm' | 'lg' | undefinednone
variant'default' | 'outline' | 'ghost' | 'blue' | 'cyan' | 'green' | 'lime' | 'mint' | 'ocean' | 'sapphire' | 'lavender' | 'ruby' | 'red' | 'slate' | 'zinc' | 'stone' | 'royal' | 'electric' | 'forest' | 'sunset' | 'magenta' | 'crimson' | 'aqua' | 'plum' | 'sky' | 'rose' | 'purple' | 'pink' | 'orange' | 'yellow' | 'teal' | 'indigo' | 'emerald' | 'gradient-blue' | 'gradient-green' | 'gradient-red' | 'gradient-yellow' | 'gradient-purple' | 'gradient-teal' | 'gradient-indigo' | 'gradient-pink' | 'gradient-orange' | 'glass' | undefinednone
width'md' | 'sm' | 'lg' | 'xl' | '2xl' | 'xs' | 'fit' | undefinednone

Content

PropTypeDefault
children*ReactNodenone
Inherited HTML props
PropTypeDefault
classNamestring | undefinednone

TooltipTrigger

TooltipTriggerProps

Content

PropTypeDefault
children*ReactNodenone
Inherited HTML props
PropTypeDefault
classNamestring | undefinednone

TooltipContentAnimated

TooltipContentAnimatedProps

animated

Behavior

PropTypeDefault
animationTooltipAnimation | undefinednone
size'md' | 'sm' | 'lg' | undefinednone
variant'default' | 'outline' | 'ghost' | 'blue' | 'cyan' | 'green' | 'lime' | 'mint' | 'ocean' | 'sapphire' | 'lavender' | 'ruby' | 'red' | 'slate' | 'zinc' | 'stone' | 'royal' | 'electric' | 'forest' | 'sunset' | 'magenta' | 'crimson' | 'aqua' | 'plum' | 'sky' | 'rose' | 'purple' | 'pink' | 'orange' | 'yellow' | 'teal' | 'indigo' | 'emerald' | 'gradient-blue' | 'gradient-green' | 'gradient-red' | 'gradient-yellow' | 'gradient-purple' | 'gradient-teal' | 'gradient-indigo' | 'gradient-pink' | 'gradient-orange' | 'glass' | undefinednone
width'md' | 'sm' | 'lg' | 'xl' | '2xl' | 'xs' | 'fit' | undefinednone

Content

PropTypeDefault
children*ReactNodenone
Inherited HTML props
PropTypeDefault
classNamestring | undefinednone
CSS variable overrides

Tooltip CSS variables

Override these tooltip variables on :root, a theme selector, or a component wrapper.

232 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-tooltip-default-bg: #ffffff;
  --zui-tooltip-default-fg: oklch(20.8% 0.042 265.755);
  --zui-tooltip-outline-bg: #000000;
  --zui-tooltip-outline-fg: #ffffff;
  --zui-tooltip-ghost-bg: oklch(27.8% 0.033 256.848);
  --zui-tooltip-ghost-fg: #ffffffe6;
  --zui-tooltip-glass-border: #00000026;
  --zui-tooltip-glass-bg: #0000001a;
  --zui-tooltip-glass-fg: oklch(20.8% 0.042 265.755);
  --zui-tooltip-emerald-bg: oklch(43.2% 0.095 166.913);
  --zui-tooltip-emerald-fg: #ffffff;
  --zui-tooltip-indigo-bg: oklch(39.8% 0.195 277.366);
  --zui-tooltip-indigo-fg: #ffffff;
  --zui-tooltip-purple-bg: oklch(43.8% 0.218 303.724);
  --zui-tooltip-purple-fg: #ffffff;
  --zui-tooltip-pink-bg: oklch(45.9% 0.187 3.815);
  --zui-tooltip-pink-fg: #ffffff;
  --zui-tooltip-rose-bg: oklch(45.5% 0.188 13.697);
  --zui-tooltip-rose-fg: #ffffff;
  --zui-tooltip-sky-bg: oklch(50% 0.134 242.749);
  --zui-tooltip-sky-fg: #ffffff;
  --zui-tooltip-teal-bg: oklch(43.7% 0.078 188.216);
  --zui-tooltip-teal-fg: #ffffff;
  --zui-tooltip-yellow-bg: oklch(47.6% 0.114 61.907);
  --zui-tooltip-yellow-fg: #ffffff;
  --zui-tooltip-orange-bg: oklch(47% 0.157 37.304);
  --zui-tooltip-orange-fg: #ffffff;
  --zui-tooltip-green-bg: oklch(44.8% 0.119 151.328);
  --zui-tooltip-green-fg: #ffffff;
  --zui-tooltip-gradient-blue-from: oklch(42.4% 0.199 265.638);
  --zui-tooltip-gradient-blue-to: oklch(43.8% 0.218 303.724);
  --zui-tooltip-gradient-blue-fg: #ffffff;
  --zui-tooltip-gradient-green-from: oklch(44.8% 0.119 151.328);
  --zui-tooltip-gradient-green-to: oklch(45.3% 0.124 130.933);
  --zui-tooltip-gradient-green-fg: #ffffff;
  --zui-tooltip-gradient-red-from: oklch(44.4% 0.177 26.899);
  --zui-tooltip-gradient-red-to: oklch(45.9% 0.187 3.815);
  --zui-tooltip-gradient-red-fg: #ffffff;
  --zui-tooltip-gradient-yellow-from: oklch(47.6% 0.114 61.907);
  --zui-tooltip-gradient-yellow-to: oklch(47% 0.157 37.304);
  --zui-tooltip-gradient-yellow-fg: #ffffff;
  --zui-tooltip-gradient-purple-from: oklch(43.8% 0.218 303.724);
  --zui-tooltip-gradient-purple-to: oklch(45.9% 0.187 3.815);
  --zui-tooltip-gradient-purple-fg: #ffffff;
  --zui-tooltip-gradient-teal-from: oklch(43.7% 0.078 188.216);
  --zui-tooltip-gradient-teal-to: oklch(45% 0.085 224.283);
  --zui-tooltip-gradient-teal-fg: #ffffff;
  --zui-tooltip-gradient-indigo-from: oklch(39.8% 0.195 277.366);
  --zui-tooltip-gradient-indigo-to: oklch(43.8% 0.218 303.724);
  --zui-tooltip-gradient-indigo-fg: #ffffff;
  --zui-tooltip-gradient-pink-from: oklch(45.9% 0.187 3.815);
  --zui-tooltip-gradient-pink-to: oklch(45.5% 0.188 13.697);
  --zui-tooltip-gradient-pink-fg: #ffffff;
  --zui-tooltip-gradient-orange-from: oklch(47% 0.157 37.304);
  --zui-tooltip-gradient-orange-to: oklch(44.4% 0.177 26.899);
  --zui-tooltip-gradient-orange-fg: #ffffff;
  --zui-tooltip-blue-border: #2563eb;
  --zui-tooltip-blue-bg: #2563eb14;
  --zui-tooltip-blue-fg: #0f172a;
  --zui-tooltip-cyan-border: #0891b2;
  --zui-tooltip-cyan-bg: #0891b214;
  --zui-tooltip-cyan-fg: #0f172a;
  --zui-tooltip-lime-border: #65a30d;
  --zui-tooltip-lime-bg: #65a30d14;
  --zui-tooltip-lime-fg: #0f172a;
  --zui-tooltip-mint-border: #10b981;
  --zui-tooltip-mint-bg: #10b98114;
  --zui-tooltip-mint-fg: #0f172a;
  --zui-tooltip-ocean-border: #0284c7;
  --zui-tooltip-ocean-bg: #0284c714;
  --zui-tooltip-ocean-fg: #0f172a;
  --zui-tooltip-sapphire-border: #1d4ed8;
  --zui-tooltip-sapphire-bg: #1d4ed814;
  --zui-tooltip-sapphire-fg: #0f172a;
  --zui-tooltip-lavender-border: #8b5cf6;
  --zui-tooltip-lavender-bg: #8b5cf614;
  --zui-tooltip-lavender-fg: #0f172a;
  --zui-tooltip-ruby-border: #be123c;
  --zui-tooltip-ruby-bg: #be123c14;
  --zui-tooltip-ruby-fg: #0f172a;
  --zui-tooltip-red-border: #dc2626;
  --zui-tooltip-red-bg: #dc262614;
  --zui-tooltip-red-fg: #0f172a;
  --zui-tooltip-slate-border: #475569;
  --zui-tooltip-slate-bg: #47556914;
  --zui-tooltip-slate-fg: #0f172a;
  --zui-tooltip-zinc-border: #52525b;
  --zui-tooltip-zinc-bg: #52525b14;
  --zui-tooltip-zinc-fg: #0f172a;
  --zui-tooltip-stone-border: #57534e;
  --zui-tooltip-stone-bg: #57534e14;
  --zui-tooltip-stone-fg: #0f172a;
  --zui-tooltip-royal-border: #4338ca;
  --zui-tooltip-royal-bg: #4338ca14;
  --zui-tooltip-royal-fg: #0f172a;
  --zui-tooltip-electric-border: #0ea5e9;
  --zui-tooltip-electric-bg: #0ea5e914;
  --zui-tooltip-electric-fg: #0f172a;
  --zui-tooltip-forest-border: #166534;
  --zui-tooltip-forest-bg: #16653414;
  --zui-tooltip-forest-fg: #0f172a;
  --zui-tooltip-sunset-border: #ea580c;
  --zui-tooltip-sunset-bg: #ea580c14;
  --zui-tooltip-sunset-fg: #0f172a;
  --zui-tooltip-magenta-border: #c026d3;
  --zui-tooltip-magenta-bg: #c026d314;
  --zui-tooltip-magenta-fg: #0f172a;
  --zui-tooltip-crimson-border: #b91c1c;
  --zui-tooltip-crimson-bg: #b91c1c14;
  --zui-tooltip-crimson-fg: #0f172a;
  --zui-tooltip-aqua-border: #0f766e;
  --zui-tooltip-aqua-bg: #0f766e14;
  --zui-tooltip-aqua-fg: #0f172a;
  --zui-tooltip-plum-border: #7e22ce;
  --zui-tooltip-plum-bg: #7e22ce14;
  --zui-tooltip-plum-fg: #0f172a;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-tooltip-default-bg-dark: #000000;
  --zui-tooltip-default-fg-dark: #ffffff;
}

What it does

Delay appearance slightly to avoid tooltip storms while moving the pointer.

Ensure triggers remain focusable for keyboard users.

Composition and API

Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.

Do not place essential instructions only inside tooltips.

Common use cases

  • Disambiguate icon-only toolbar controls.
  • Clarify truncated column headers.
  • Explain formula fields in spreadsheets.
  • Offer units on compact KPIs.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Tooltip component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize tooltip with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Tooltip implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.