Component

Tooltip

Contextual hint on hover.

Preview

Opens as soon as the pointer enters the trigger.

Examples

Default

Opens immediately on hover.

Opens as soon as the pointer enters the trigger.

Delay

700ms open delay (see delayDuration on Tooltip.Root).

700ms delay before the tooltip opens (hover and hold).

AI Prompt

Ready to copy and paste into any AI model.

7 lines

prompt.txt

Build a shadcn/ui **Tooltip** component for the **Clinic Admin** design system.

**Brand tokens:** Primary #70C4CA (teal), secondary #F3F4F6, destructive #F7A9AA, border #C4D0DB, radius 10px (default). Font: Nunito Sans for body, Nunito for headings.

**Design preview:** Replicate exactly the UI shown in the Clinic Admin docs preview for this component (same labels, structure, variants, and layout).

Return a React component with TypeScript. Use shadcn/ui **Tooltip** as base, cn() + Tailwind CSS. Support variants and sizes shown in the preview.

Copy once, paste anywhere, keep consistent output.