Overlay · astro-ui · Popover
PopoverJS
Click-triggered anchored panel for interactive content.
Popover is a click-triggered anchored layer for interactive content — the trigger slot renders a real <button> (aria-expanded + aria-controls) and the content slot renders in an anchored panel below (or above) it. The scoped script toggles the panel, closes on Escape and outside-pointer, moves focus into the panel on open, and returns focus to the trigger on close. Positioning is CSS-anchored relative to the trigger wrapper (same technique as Tooltip), so the panel never needs viewport math.
Features
- Real <button> trigger with aria-expanded / aria-controls
- Focus moves into the panel on open, returns to the trigger on close
- Closes on Escape and outside-pointer
- top / bottom placement; CSS-anchored — no viewport math
Usage
---
import { Popover } from "astro-ui";
---
<Popover id="share">
<span slot="trigger">Share</span>
<span slot="content">Share via <a href="…">link</a></span>
</Popover>Demos
Basic
<Popover id="share">
<span slot="trigger">Share</span>
<span slot="content">Share via <a href="#">link</a></span>
</Popover>Top placement
<Popover id="embed" placement="top">
<span slot="trigger">Embed</span>
<span slot="content">Copy the embed code…</span>
</Popover>API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
placement | "top" | "bottom" | "bottom" | Anchor the panel above the trigger when there is no room below. |
open | boolean | false | Open on first render (SSR). |
disabled | boolean | false | Disables the trigger button. |
triggerLabel | string | — | Accessible name for the trigger (required when trigger text is absent). |
id | string | — | Recommended: stable prefix for trigger/panel ids. |
class | string | — | Merged via cn(); Tailwind classes welcome. |
id | string | — | Element id. |
Slots
| Slot | Description |
|---|---|
trigger | Trigger button content. |
content | Anchored panel content (role="dialog"). |
Accessibility
Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.
aria-expanded+aria-controlswire trigger to panel- Panel is
role="dialog"; Escape closes and focus returns to the trigger
FAQ
Popover or HoverCard?
Popover = click-triggered, dismissible, focus-managed — use for interactive content (forms, links). HoverCard = pointer/focus preview — use for passive rich previews.
Changelog
Version history mentioning Popover.
- Overlay (8): Dialog, AlertDialog, Sheet, Tooltip, Popover, HoverCard, Lightbox, Menu.