Popover

Demo & usage

More examples

When to use

• Showing rich, possibly interactive content anchored to a trigger.
• Detail cards, mini-forms or menus that exceed what a Tooltip can hold.
• Semantic confirmations or status callouts — reach for the matching `variant`.
• For plain hint text, a Tooltip is lighter; for a list of actions, a Dropdown Menu.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Outputs

Customization & theming

• Seven variants (default · dark · primary · success · warning · danger · info) with tinted header, icon badge and accent bar.
• Eight placements with automatic flip + viewport clamping; optional pointer arrow via `[showArrow]`. `align` (`start` · `center` · `end`) folds into the side of `position`, which adds the four side-aligned placements (`left-start` … `right-end`) — every Popout configuration is a Popover one (`SV_POPOUT_PRESET`).
• Portaled to `document.body` and re-anchored to its trigger on scroll of any ancestor container (capture-phase) and on resize — never drifts or leaves the viewport.
• Click / hover / manual triggers, configurable `offset`, hover delays, and min/max width. A hover popover also keeps itself open while the pointer travels across the gap towards the panel (a safe corridor, not a longer timer), so reaching for it does not dismiss it — and turning away from the panel mid-way starts the close again rather than leaving it stuck open.
• Placement arithmetic is shared with Dropdown Menu, Popout and Tooltip: twelve placements, conditional flip, viewport clamp, `start`/`end` mirrored for RTL text, and correction for a transformed ancestor that has become the containing block.
• If the trigger is removed or collapses to nothing while the popover is open — the row it sits in is deleted, its `<details>` closes — the popover closes rather than floating over unrelated content. The trigger is size-watched while open, so this happens at the collapse, not at the next scroll.
• Header (title + subtitle + optional close button), content and footer slots; `closeOnOutsideClick` / `closeOnEsc` / `closeOnContentClick` toggles; `customClass` on the surface.
• Responsive: the panel width is capped to the viewport (`max-w-[calc(100vw-1rem)]`) on top of flip + clamp, so wide content can never overflow a small screen.

Best practices

• Do: Leave `[flip]` on (default) so the panel stays on-screen; add `[showArrow]` to anchor it visually to the trigger.
• Do: Use `trigger="click"` (or `"manual"`) for interactive content so it doesn't vanish on mouse-out.
• Do: Match the `variant` to intent — `danger` for destructive callouts, `success` for confirmations.
• Do: Say which kind of popover it is with `[interactive]`: `false` for a passive callout (announced as a description of the trigger, never takes focus), `true` for anything with fields or buttons (a dialog that takes focus and keeps Tab inside). Unset keeps the original behaviour. `trigger` stays separate — it says how the panel opens, never what it is; `trigger="hover"` with `[interactive]="true"` is a hover card.
• Tip: Set `[hoverOpenDelay]` on hover popovers to avoid opening on an accidental pass-over. `[hoverCloseDelay]` is a fallback, not the mechanism that keeps the panel reachable — the pointer travelling towards the panel already cancels the close.

Accessibility

• Trigger exposes `aria-haspopup="dialog"`, `aria-expanded` and `aria-controls`; the panel is `role="dialog"` labelled via `aria-labelledby`/`aria-label` and described via `aria-describedby` (subtitle).
• With `[autoFocus]` focus moves into the panel on click/manual open; on close focus returns to the trigger unless the user has already put it somewhere else (an outside click on another control keeps its focus). Closes on Esc and outside click (both configurable).
• `[interactive]="false"` makes the panel `role="tooltip"` and references it from the trigger's `aria-describedby` while open, with no `aria-haspopup` — it never takes focus, and it renders no Close button even with `[showClose]`, because a tooltip must not hold controls (dev mode warns if you project a focusable element into one). `[interactive]="true"` keeps `role="dialog"`, moves focus to the first focusable element (or the panel, `tabindex="-1"`) on a click/manual open, and keeps Tab / Shift+Tab inside the panel.