Zetta v1.6

Components · Overlays & menus

Hover card

Preview card triggered by hovering over a link or interactive element. Split from zetta-overlay-v1_4.md (removed in v1.5) in v1.4.

Preview

AC

Build with the skill

No package to install — hand this to your AI to generate or migrate the component in your stack.

Prompt for your AI 
Apply the Zetta "Hover card" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `hover-card` spec and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `hover-card` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Anatomy & rules

[Hover target (link, avatar, etc.)]
             ↓ (hover)
┌──────────────────────────────────┐
│  Avatar  Name                    │
│  @username                       │  ← hover-card panel (max 320px)
│  Bio or description text         │
│  [Follow]  [Message]             │
└──────────────────────────────────┘
State Visual
Hidden Not rendered
Entering 150ms delay, fade in
Visible Panel shown near trigger
Exiting Fade out on cursor leave

When to use

  • Username or avatar hover — show user profile preview.
  • Link hover — show page or resource preview.
  • Data point hover on a chart — show detailed breakdown.

When not to use

  • Critical information — users on mobile or keyboard cannot hover.
  • Actions that must be activated — use Popover.
  • Simple labels — use Tooltip.

Do

  • Add a delay (700ms+) to avoid accidental triggers while moving the cursor.
  • Allow the cursor to move from the trigger into the panel without closing.
  • Provide keyboard-accessible alternatives for all hover card content.
  • Hover card content should be a preview — not the primary access point.
  • Keep content scannable: avatar + name + brief context + optional actions.
  • Max 2 actions. Use short verb labels: "Follow", "Message".

Keyboard

Hover Card is hover-only and does not open via keyboard. Ensure all content inside is also accessible via another interaction path (clicking the trigger, navigating to the linked page, etc.).

Accessibility

  • role="tooltip" if content is purely informational; role="dialog" if it contains interactive elements.
  • Interactive elements inside must be keyboard-reachable via another path — hover alone is not sufficient (WCAG 1.3.1).
  • aria-describedby on the trigger pointing to the hover card id if informational.

Spec

Values and token references resolved straight from the Zetta spec.

hover-card
backgroundColor
{colors.popover}
textColor
{colors.popover-foreground}
borderColor
{colors.hairline}
borderWidth
1px
borderRadius
{rounded.base}
shadow
{elevation.shadow.overlay}
padding
{spacing.md}
maxWidth
320px