Choose auto or manual popovers

The value of the popover attribute changes how a panel dismisses. The default auto state fits most transient pickers and action panels. popover="manual" is for UI that must stay open 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. Escape closes it. A manual popover does not light-dismiss. Several manual popovers can stay open, so your app 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>

Open two auto popovers and the second replaces the first. Switch both to manual and outside clicks no longer clean up for you.

A status message that is purely informational may not need a popover at all. Normal document flow or a live status region works when the message should stay visible and take space. Pick 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 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.

Try this on your board: open two auto popovers and confirm the second replaces the first. Change them to manual and add explicit close buttons plus hide calls. If a manual panel becomes impossible to dismiss, revert to auto unless persistence is essential.