Open a popover with HTML

A small panel of secondary task actions should appear above surrounding cards, dismiss when the user clicks elsewhere, and respond to Escape. The Popover API provides that behavior without an overlay library or a z-index contest.

Add popover to the panel and point a button’s popovertarget at its ID. The browser creates the invoker relationship and toggles the panel. The popover starts hidden, enters the top layer when shown, and uses the default auto behavior.

<button type="button" popovertarget="task-actions">More actions</button>
<div id="task-actions" popover>
  <button type="button" data-action="duplicate">Duplicate task</button>
  <button type="button" data-action="archive">Archive task</button>
</div>

This declarative version works with no application JavaScript. Use popovertargetaction="show", hide, or toggle when the default toggle is not specific enough. Script can call showPopover(), hidePopover(), or togglePopover() for state-driven cases.

Popover describes display behavior, not the semantics of everything inside it. Keep real buttons as buttons and links as links. Do not add role="menu" just because the panel resembles a menu; that ARIA pattern brings a different keyboard contract you would then need to implement.

Top-layer placement solves clipping and stacking, but it does not choose a good visual anchor for you. Current CSS anchor positioning can help where supported, while ordinary fixed or inset positioning can provide a simpler fallback. Interaction should remain usable even if the panel appears in a less elegant place.

Put the example inside a card with overflow: hidden and confirm the open panel is not clipped. Open it with the keyboard, press Escape, and click outside it. If the panel is visible on initial load, check whether your CSS is overriding the browser’s hidden state instead of styling :popover-open.