# Popover
> Generated from popover.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `open` | boolean | `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 | `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 | `click` | How the panel opens. Click closes on outside-click + Escape (focus returns); hover/focus track pointer/focus |
| `title` | string | `—` | Bold header rendered above the body (hidden when empty) |
| `content` | string | `—` | Text body alternative to slotted content (used when nothing is slotted) |
| `arrow` | boolean | `false` | Show the pointer arrow at the panel edge |
| `[slot=trigger]` | slotted element | `—` | The element that toggles the panel |
| `open / close` | CustomEvent | `—` | Composed events on show / hide |

## Visual standard (measured)
- Panel: bg-elevated #FFFFFF, 1px border #E3E3E3, radius 8, min-width 180 / max 280
- Elevation: 0 6px 16px ink 12%
- Title: SemiBold 600, 14/21 text-default, 6px above the body
- Body: pad 12 16, 14/21 text-secondary #4A4A4A (text-default when title-less)
- Placement: top · bottom · left · right (8px offset), PLUS 8 edge-aligned (top-start/-end, bottom-start/-end, left-start/-end, right-start/-end) — same side, aligned to the trigger edge with the arrow offset near it
- Trigger: click (default) · hover · focus
- Arrow: optional 8px pointer at the panel edge, matches the surface + border
- Motion: fade + 4px directional lift on open (ease-out, persistent node)

## When to use
- **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

Trigger on click for interactive content (Tooltip owns hover). Give it a short `title` and a one-line body; a long form belongs in a Modal. A click trigger closes on outside-click and Escape (focus returns to the trigger) — both built in.