Tooltip

Short, contextual help on hover or keyboard focus. The app wraps content in TooltipProvider in the root layout. The trigger must be a single element; use asChild so it stays one focusable control.

Variants

Light & dark, with or without tail

Four combinations per placement: light or dark surface, and either an arrow tail toward the anchor or a plain rounded panel.

Dark — with tail (default)

Dark — no tail

Light — with tail

Light — no tail

Placement

Top, bottom, left, right

top

bottom

left

right

Triggers

Button & icon

Primary button

Icon button

Structure

Anatomy

Trigger

Single child element inside a wrapper that opens the tooltip on hover or when any descendant receives focus.

Surface

Light (#FFFFFF) or dark (#0F172A) panel, 14px / 1.4 body, 6px radius, shadow-md, border (with-tail vs no-tail).

Tail

Optional arrow on the side facing the trigger; fill matches the panel (#0F172A or #FFFFFF), light adds a 1px stroke to match the border token.

Position

Absolutely positioned relative to the trigger; stays above nearby content via z-index.

Usage

Do & Don't

Keep copy under two short sentences.
Use for non-essential clarification; critical info belongs in the page.

Don't

Don't put interactive controls inside the tooltip.
Don't rely on tooltip alone for form validation — use inline error text.