Components · Overlays

Tooltip

A small label that names or clarifies a control on hover and focus. It sits on the accent surface — the one place Zetta inverts foreground and background — capped at 200px so it stays a label, never a paragraph.

Preview

The bubble across the three themes. Positioning relative to its trigger is the framework's job.

Light

Dark

Accessibility

Spec

Values and token references straight from the Zetta spec.

tooltip

backgroundColor: {colors.accent}
textColor: {colors.accent-foreground}
borderRadius: {rounded.base}
fontFamily: Geist
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
paddingX: 10px
paddingY: 6px
maxWidth: 200px
shadow: {shadows.sm}

Build with the skill

No package to install — hand this to your AI to generate the tooltip in your stack.

Prompt for your AI

Implement the Zetta "Tooltip" component in this project's stack using the zetta-design-md skill.

- Apply the `tooltip` spec from the skill (variants: default).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

Accent background with accent-foreground text, base radius, shadow-sm; 6px/10px padding, caption type, max-width 200px.
One short phrase only. Never put interactive content, links, or essential-only information in a tooltip.

Accessibility

Show on both hover and keyboard focus; wire the trigger with aria-describedby pointing at the tooltip.
Dismissible with Escape and not obscuring the element it describes (WCAG 1.4.13).

Known gaps

Arrow/caret, placement tokens, and show/hide delay timings are not specified — use your framework primitive's defaults.