Tooltip Component

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. Perfect for providing additional context and help text.

Basic Tooltip

A simple tooltip with hover trigger.

Positions

Different tooltip positions for various layouts.

Variants

Different tooltip styles for various use cases.

Sizes

Different tooltip sizes for various contexts.

Real-world Examples

Common tooltip patterns used in applications.

Icon Tooltips

Status Indicators

Active
Pending
Error

Form Field Help

Create Account

Fill in your details to get started

Action Buttons

Installation

npx shadcn@latest add https://catppuccin-components.vercel.app/r/tooltip.json