Popover

A floating panel for filters, settings or extra detail. It is positioned with fixed coordinates, so it escapes overflow: hidden ancestors, and it closes on Escape or an outside click.

Examples

Basic

Show code

<Popover label="Filters">
  {#snippet trigger(attrs)}
    <Button {...attrs} variant="outline">Filters</Button>
  {/snippet}

  <p>Filter the table by status, owner or date.</p>
  <Button size="sm">Apply</Button>
</Popover>

Top, end aligned

Show code

<Popover label="Help" side="top" align="end">
  {#snippet trigger(attrs)}
    <Button {...attrs} variant="ghost">Help</Button>
  {/snippet}

  <p>Shown above the trigger, aligned to its end edge.</p>
</Popover>

Props

Prop	Type	Default	Description
`trigger`	`Snippet<[TriggerProps]>`	`—`	Renders the trigger. Spread the props; they wire the click, keys, aria-expanded and aria-controls.
`children`	`Snippet`	`—`	The panel content.
`open`	`boolean`	`false`	Whether the panel is open. Bind it with bind:open.
`side`	`"top" \| "bottom"`	`"bottom"`	Which side of the trigger the panel sits on.
`align`	`"start" \| "center" \| "end"`	`"start"`	How the panel lines up horizontally.
`label`	`string`	`"Popover"`	Accessible name for the dialog panel.

The panel is a non-modal dialog and takes focus when opened. Escape and outside presses close it and return focus to the trigger. Bind open to control it yourself.