References

Beginner-friendly references for web development, with live, editable examples.

The HTML popover attribute

Global attribute Works on every element All modern browsers Updated
Quick answer

The HTML popover attribute turns any element into a popover — a layer shown on top of everything else in the top layer. Use popover (auto, with light-dismiss) or popover="manual", and open it with a <button popovertarget="id">. It is a global attribute from the Popover API, with no JavaScript required.

Overview

The Popover API (Baseline 2024) makes overlays — menus, tooltips, dialogs, disclosure widgets — without custom JavaScript. Add popover to an element and it starts hidden in the top layer; a control with popovertarget="theId" toggles it.

An auto popover supports light dismiss (clicking outside or pressing Escape closes it) and only one auto popover is open at a time. A manual popover stays open until you explicitly close it. The browser also handles focus and accessibility wiring for you, making popovers a far simpler and more robust choice than hand-rolled dropdowns.

Values

Value
auto (default) | manual | hint

Example

Live example 
<button popovertarget="demo" style="padding:6px 12px;">Open popover</button>
<div id="demo" popover style="padding:12px; border:1px solid #cbd5e1; border-radius:8px;">Hello from a native popover! Press Esc or click outside to close.</div>

Best practices

  • Prefer the Popover API over custom JavaScript dropdowns — the browser handles the top layer, dismissal and focus.
  • Use auto for menus and tooltips that should close on outside click; use manual for persistent panels.
  • Connect controls with popovertarget rather than wiring click handlers yourself.
  • Label the popover content appropriately so its purpose is clear to assistive tech.

Accessibility

The Popover API does a lot of accessibility work automatically: popovers open in the top layer, Escape closes auto popovers, and focus is managed sensibly. Your job is to give the popover meaningful content and, where relevant, the right role and an accessible name so screen-reader users understand what it is.

Frequently asked questions

What does the popover attribute do?
It turns an element into a popover layer shown on top of the page, toggled by a button with popovertarget — no JavaScript needed.
What is the difference between popover="auto" and "manual"?
auto popovers light-dismiss (click outside or Escape) and only one is open at a time; manual popovers stay open until you close them in code or with another control.
How do I open a popover?
Give the popover an id and add a button with popovertarget="thatId"; the button toggles it automatically.
Is the Popover API accessible?
Largely yes — the browser manages the top layer, Escape-to-close and focus. Still give the popover a sensible role and label for its content.
part slot (attr)