Choose auto or manual popovers

The value of the popover attribute changes the panel’s dismissal rules. The default auto state is right for most transient pickers and action panels. popover="manual" is for UI that must remain until your code explicitly hides it.

An auto popover participates in light dismiss: opening another auto popover normally closes the current one, clicking outside closes it, and Escape closes it. A manual popover does not light-dismiss and multiple manual popovers may remain open, so the application must provide and test every exit.

<button popovertarget="filters">Filters</button>
<section id="filters" popover>...</section>

<div id="sync-status" popover="manual" role="status">
  Synchronizing tasks…
</div>
<script>
  const syncStatus = document.querySelector("#sync-status")
  syncStatus.showPopover()
  // Always pair this with syncStatus.hidePopover()
</script>

A status message that is purely informational may not need a popover at all. Use normal document flow or a live status region when it should stay visible and occupy space. Choose a popover because top-layer transient presentation fits, not because it sounds modern.

The beforetoggle event fires before state changes and can be canceled in appropriate cases. toggle fires after the change. Listen to these events for coordination and observation; do not mirror the same open state into several unrelated booleans unless another system truly needs it.

Feature-detect scripted methods when your browser matrix includes older engines. Keep the triggering action usable through a link, inline panel, or another clear fallback. A hidden control that only a missing API can reveal is not progressive enhancement.

Open two auto popovers and confirm the second replaces the first. Change them to manual and observe the new responsibility: outside clicks and Escape no longer provide the same cleanup. Add explicit close buttons and hide calls. If a manual panel becomes impossible to dismiss, revert to auto unless persistence is essential.