The Popover API
Create tooltips and dialogs with the native popover attribute.
The Popover API is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What the Popover API Does
The Popover API gives HTML a native way to create popovers, dialogs, tooltips, and menus — without manual JavaScript for positioning, focus handling, light-dismiss, or escape-to-close. Built-in behavior matches user expectations.
The popover Attribute
Add popover to any element to make it a popover. It is hidden by default. A trigger button with popovertarget="popover-id" shows it on click. The browser handles open/close state automatically.
<button popovertarget="info">Show details</button>
<div id="info" popover>
<p>Here is some popover content.</p>
</div>Popover Modes
popover="auto" (default) — light-dismisses on outside click or Escape; only one auto popover open at a time. popover="manual" — does not auto-dismiss; must be closed explicitly via JS or another trigger.
Trigger Buttons
The popovertarget attribute links a button to a popover by id. The browser handles the toggle behavior: click the button to show, click again or click outside to dismiss. No event handlers needed for basic use.
Top Layer Rendering
Popovers render in the top layer — above all other content, regardless of z-index or stacking context. This eliminates the classic "modal hidden behind an overflow:hidden parent" bug that plagues hand-rolled popovers.
Programmatic Show and Hide
JavaScript can show or hide popovers: element.showPopover(), element.hidePopover(), element.togglePopover(). Same semantics as the declarative trigger — light-dismiss continues to work for auto mode.
toggle Event
Popovers fire a toggle event when their state changes. The event's newState is "open" or "closed". Useful for analytics, focus management, or coordinating other UI with the popover's open state.
popoverEl.addEventListener("toggle", (e) => {
console.log("Popover is now", e.newState);
});CSS Pseudo-Class
The :popover-open pseudo-class matches popovers in their open state. Style transitions, opacity, transforms based on this state: [popover]:popover-open { opacity: 1; transform: none; }.
Anchor Positioning
Combined with the CSS Anchor Positioning API, popovers can be positioned relative to their trigger automatically — no JavaScript needed for the classic "tooltip near the button" pattern. Both features are part of the same modern UI primitive push.
Accessibility
The browser handles focus trapping for modal popovers, restores focus to the trigger on close, and announces the popover's open state to screen readers. Building this manually requires significant ARIA boilerplate; the Popover API delivers it for free.
Browser Support
Chrome and Safari support the Popover API; Firefox added support more recently. For broader compatibility, a small polyfill exists. New projects can ship native and progressive-enhance for older browsers.
Replacing Old Patterns
Many JS modal libraries (sweetalert, react-modal) exist primarily to work around what the Popover API now does natively. Plan to migrate: smaller bundles, better defaults, and less code to maintain. The Popover API is one of the largest improvements to HTML in years.
Knowledge Check
What does popover="auto" do that popover="manual" does not?
Summary
The Popover API adds the popover attribute plus showPopover/hidePopover/togglePopover JS, popovertarget trigger linking, top-layer rendering above all stacking contexts, :popover-open pseudo-class, and toggle events. auto mode light-dismisses; manual mode is explicit. Replaces most custom modal/tooltip libraries with one HTML primitive that handles accessibility, focus and z-index correctly.
Frequently asked questions
Is the “The Popover API” lesson free?
Yes — the full text of “The Popover API” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “The Popover API”?
Create tooltips and dialogs with the native popover attribute. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “The Popover API” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.