Popover API Test

Checking support…

Note: A popover is not the same as a modal dialog. It is useful for lightweight overlays. Use <dialog> for modal workflows.

Capability checks

`"popover" in HTMLElement.prototype`	—
`HTMLElement.prototype.showPopover`	—
`HTMLElement.prototype.hidePopover`	—
`HTMLElement.prototype.togglePopover`	—
`CSS.supports("selector(:popover-open)")`	—
`CSS.supports("anchor-name: --x")`	—

Declarative auto popover

This uses only HTML: popovertarget="autoPopover".

Open state: false

Auto popover

This popover closes automatically when you click outside it or press Escape.

Manual popover

A manual popover stays open until explicitly hidden.

Open state: false

Manual popover

This popover is controlled from JavaScript.

Anchored popover

This demonstrates CSS anchor positioning where supported. Browsers without CSS anchor positioning will still show the popover, but placement may fall back to default top-layer positioning.

Open state: false

Anchored popover

This popover attempts to position itself relative to the button using CSS anchor positioning.

Editable content for manual popover

Manual popover text

Status

Idle.

Event counts

Popover	`beforetoggle`	`toggle`
Auto	0	0
Manual	0	0
Anchored	0	0

Last event

{}

Raw snapshot

{}