Popover

A floating panel anchored to its trigger — the generic surface Menu and Select are specialisations of.

Use it for a filter panel, a colour picker, a "why is this disabled?" explainer: anything that is content rather than a list of commands. The trigger comes in as a snippet and receives the props to spread, so aria-expanded and aria-controls land on YOUR button — the same shape as Tooltip.

<Popover>
  {#snippet trigger(props)}<Button {...props}>Filters</Button>{/snippet}
  {#snippet children()}…{/snippet}
</Popover>

Overlays · two-way: bind:open · portalled to <body> · keyboard contract

<script lang="ts">
	import { Popover } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
open bind:	boolean	false	Opening moves focus into the panel; closing returns it to the trigger.
side	Side	'bottom'	Preferred side of the trigger. Flips if it does not fit.
align	Align	'start'	Alignment along the trigger's cross axis.
class	string	—	Merged with the component's own classes, last — so yours win.
aria-label	string	—	Names the panel for assistive tech.
onOpenChange	(open: boolean) => void	—	Fires on open and on close, however it was dismissed.
trigger required	Snippet<[Record<string, unknown>]>	—	Your button. Spread the props it receives to get aria-expanded and the click handler.
children required	Snippet	—	The content.

Keyboard

Key	Does
Enter / Space	open from the trigger; focus moves into the panel
Escape	close, focus returns to the trigger

Overlays · Dialog · Sheet · Drawer · Tooltip

---

← All components · Getting started · Theming · source