How do I install the Vibe UI Tooltip component?

You can install Tooltip into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add tooltip" in your terminal.

Does Vibe UI Tooltip support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Is the Vibe UI Tooltip component accessible?

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Preview

Installation

pnpm dlx vibe-ui-kit@latest add tooltip button

💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: button

Variations

Vibe UI's Tooltip component supports multiple visual style presets to match your application's theme:

Examples

Placements

Tooltips can be positioned to open on the top, bottom, left, or right of the trigger element:

Props

Prop	Type	Default	Description
content	ReactNode	undefined	The explanatory message or element displayed inside the tooltip popover.
variant	'default' \| 'glass' \| 'retro' \| 'glow' \| 'cyberpunk'	'default'	The visual theme preset style of the tooltip popover.
delay	number	200	The hover delay duration (in ms) before the tooltip opens.
side	'top' \| 'bottom' \| 'left' \| 'right'	'top'	The default placement side of the tooltip relative to its trigger.