Popover

The anchored surface behind every dropdown: flips, closes on outside press and Escape, optionally viewport-fixed.

@ruckc/truss-ui Overlays

Import

import { Popover } from '@ruckc/truss-ui';

Playground

No interactive demo

This component is documented through its API reference below.

API

Anchored surface. By default place it inside a `position: relative` wrapper (`.tr-anchor`); it anchors to its parent, flips above when there is no room below, and closes on outside press or Escape. With `fixed` + `anchor` it positions against the viewport instead, so it can escape clipping/scrolling ancestors (tables, panels) — render it anywhere.

Prop	Type	Default	Description
`open` bindable	`boolean`	`false`	Whether it is open. Bind it with `bind:open`.
`onclose` event	`(refocus: boolean) => void`	—	`refocus` is true when closed by Escape, so the owner can return focus to its trigger.
`align`	`'start' \| 'end'`	`'start'`	Alignment (`start` or `end`).
`fixed`	`boolean`	`false`	Viewport-fixed positioning against `anchor`.
`anchor`	`HTMLElement \| null`	—	The element to position against (with `fixed`).
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	—	Side of the anchor to open on (flips to the opposite side when there is no room). Applies to `fixed` popovers only; unset keeps the default below-the-anchor placement with `align`.
`children` required snippet	`Snippet`	—	Content, as a Svelte snippet.