7.3 — The Popover API: Declarative Layered UI
The Popover API turns any element into a floating overlay – tooltips, dropdown menus, info panels – without a single line of JavaScript. By adding the popover attribute to a container and linking a trigger button with popovertarget, the browser handles layering, opening, closing, and light‑dismiss behaviour entirely on its own.
Making Any Element a Popover
The popover attribute is a global attribute – you can add it to any container element (<div>, <section>, <nav>, etc.). Its value controls the dismissal behaviour:
auto(light‑dismiss) – the popover closes automatically when the user clicks outside of it, presses Esc, or opens anotherautopopover. This is ideal for tooltips and dropdowns.manual– the popover stays open until explicitly closed. It ignores outside clicks and keyboard dismiss. Use this for persistent panels that require a deliberate close button.
You can also omit the value entirely (popover alone), which defaults to auto.
<div popover="auto" id="my-popover"> ... </div>
Triggering a Popover: popovertarget and popovertargetaction
A <button> (or any element that can be a trigger) can control a popover through two attributes:
popovertarget– theidof the popover element to control.popovertargetaction– what clicking the button does. Three possible values:show– always opens the popover.hide– always closes the popover.toggle– alternates between open and closed (the default if omitted).
This declarative linkage replaces what used to be an entire event‑listener script. The browser manages the state completely.
<button popovertarget="my-popover" popovertargetaction="toggle">Toggle Popover</button>
Live Demo: Auto Popover with Toggle Button
Live Stream Status Flags
- Node Ingestion: Normal
- Buffer Bounds: 0 Errors
Click the button to open the popover. Click anywhere outside or press Esc to close it.
Enterprise Blueprint – Telemetry Dropdown with Manual Popover
Below is a complete, production‑ready popover that uses a manual popover for a persistent info panel, with separate show/hide buttons. Notice the clean separation: the buttons declare what they do, and the popover element defines itself with a single attribute.
<!-- Trigger buttons -->
<button popovertarget="telemetry-dropdown" popovertargetaction="show">
Show Metrics
</button>
<button popovertarget="telemetry-dropdown" popovertargetaction="hide">
Hide Metrics
</button>
<!-- The popover itself -->
<div popover="manual" id="telemetry-dropdown">
<h4>Live Stream Status Flags</h4>
<ul>
<li>Node Ingestion: Normal</li>
<li>Buffer Bounds: 0 Errors</li>
</ul>
</div>Live Stream Status Flags
- Node Ingestion: Normal
- Buffer Bounds: 0 Errors
Manual popovers stay open until explicitly hidden – no light‑dismiss.
The popover="manual" setting ensures the panel remains visible until the "Hide Metrics" button is clicked. No background clicks or Esc will close it.
The Popover API gives you layered UI elements without JavaScript. Use popover="auto" for tooltips and dropdowns that dismiss with outside clicks; use popover="manual" for persistent panels. Link buttons with popovertarget and popovertargetaction. The browser handles focus, layering, and accessibility – all you provide is the HTML.