Component

<dom-popover>

custom element

Floating panel anchored to a trigger. Built on the native HTML Popover API — top layer, light-dismiss and Esc are handled by the browser.

Demo

Floating panel

Built on the native Popover API — top layer, light-dismiss, and Esc to close.

basic.htmlhtml

<dom-popover>
	<button
		slot="trigger"
		type="button"
		class="inline-flex h-10 items-center rounded-full bg-secondary px-4 text-sm font-medium text-fg ring-1 ring-border hover:bg-accent"
	>
		More
	</button>
	<div slot="panel" class="max-w-xs rounded-2xl border border-border bg-background p-4 text-sm text-muted-fg shadow-lg">
		<p class="font-semibold text-fg">Quick facts</p>
		<p class="mt-2">Anything you like — text, buttons, even forms.</p>
	</div>
</dom-popover>

<script type="module">
	import '@getdom/studio/headless/popover.js';
</script>

Usage

Plain HTML

<dom-popover>
  <button slot="trigger">More</button>
  <div slot="panel">
    <p>Anything you like — text, buttons, even forms.</p>
  </div>
</dom-popover>

Slots

Name	Scope	Description
#trigger	—	Element that toggles the panel when clicked.
#panel	—	Panel content. Gets popover="auto" applied automatically.

Attributes

Name	Type	Description
open	boolean	Reflects open state.
placement	'top' \| 'right' \| 'bottom' \| 'left' \| '<side>-<align>'	Preferred placement before collision handling (default bottom).
align	'left' \| 'right' \| 'center'	Horizontal alignment under the trigger (default left).
offset	number	Gap in pixels between trigger and panel (default 8).
collision-padding	number	Viewport padding used when flipping or shifting the panel (default 8).
floating-mode	'viewport' \| 'anchor'	viewport keeps the panel inside the browser; anchor keeps it attached to the trigger while scrolling.
flip	boolean	Allow the panel to flip to the opposite side when it would collide with the viewport.
lock-scroll	boolean	Lock document scrolling while the panel is open.
trigger	'click' \| 'hover' \| 'hover-click'	How the trigger opens the panel. hover-click opens on hover and pins open on click.
hover-close-delay	number	Delay before closing a hover-triggered panel after pointer/focus leaves.
data-trigger-id	string	Id of an external trigger element.
data-panel-id	string	Id of an external (teleported) panel element.

From dom-popover.__doc.attributes.

Events

Name	Payload	Description
dom:open	—	Fired when the panel opens.
dom:close	—	Fired when the panel closes.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.

Keyboard