Overlay · astro-ui · HoverCard

HoverCard

Rich preview card on hover and keyboard focus — CSS-only.

HoverCard is the CSS-only sibling of Popover: content that appears after a short delay when the user hovers or focuses the trigger. Unlike Tooltip the card stays interactive (links inside work) and carries an aria-label so assistive tech can announce it. Because it is pointer-driven, never put essential information only in a HoverCard — the trigger itself must carry the primary content.

← All components

Features

Zero JS — pure CSS :hover / :focus-within with an open delay
Interactive content: links inside the card work
top / bottom placement; symmetric show/hide delay (no flicker)
role="note" + aria-label announced on focus

Usage

---
import { HoverCard } from "astro-ui";
---

<HoverCard ariaLabel="Profile preview">
  <a href="/users/ada">@ada</a>
  <div slot="content">
    <strong>Ada Lovelace</strong>
    <p>Notes on the Analytical Engine.</p>
  </div>
</HoverCard>

Demos

Basic

<HoverCard ariaLabel="Profile preview">
  <a href="#">@ada</a>
  <div slot="content"><strong>Ada Lovelace</strong><p>Preview copy…</p></div>
</HoverCard>

Top placement

<HoverCard placement="top" ariaLabel="Profile preview">
  <a href="#">@ada</a>
  <div slot="content"><strong>Ada Lovelace</strong><p>Preview copy…</p></div>
</HoverCard>

API

Props

Prop	Type	Default	Description
`placement`	`"top" \| "bottom"`	`"bottom"`	Placement of the card relative to the trigger.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.
`ariaLabel`	`string`	`—`	Accessible name.

Slots

Slot	Description
`default`	The trigger content (focusable).
`content`	The preview card.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

Can I put essential info in it?

No — it's pointer-driven and dismissible. The trigger must carry the primary content; the card is an enhancement (same rule as Tooltip).

Changelog

Version history mentioning HoverCard.

v0.1.0 — 2026-11-11

added

Overlay (8): Dialog, AlertDialog, Sheet, Tooltip, Popover, HoverCard, Lightbox, Menu.