## Popover
Anchor a floating card of rich content — a title, a body, and an optional arrow — to a trigger.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-popover> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings.
Props:
- open: boolean, default false. Controlled open state; reflected attribute
- placement: top | bottom | left | right | top-start | top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end, default bottom. Side the panel anchors to. The 4 cardinal values align the panel to the trigger's leading edge; the 8 edge-aligned values (…-start / …-end) pin it to the trigger's start/end edge with the arrow offset near that edge (AntD naming)
- trigger: click | hover | focus, default click. How the panel opens. Click closes on outside-click + Escape (focus returns); hover/focus track pointer/focus
- title: string, default —. Bold header rendered above the body (hidden when empty)
- content: string, default —. Text body alternative to slotted content (used when nothing is slotted)
- arrow: boolean, default false. Show the pointer arrow at the panel edge
- [slot=trigger]: slotted element, default —. The element that toggles the panel
- open / close: CustomEvent, default —. Composed events on show / hide
Tokens: bg-elevated, text-default, text-secondary, border, radius-default, font-product, motion-mid, ease-out.
Use when: Popover (a small panel of rich or interactive content anchored to a control); Tooltip (a short, non-interactive hint on hover); Modal (a focused task that should block the rest of the page).