How popovers are about to become a whole lot easier to build
summary
Browsers now provide a built‑in popover attribute and the dialog element so popovers can work with little or no JavaScript; Chrome/Edge ship it already, Chrome telemetry shows ~0.3% of page loads using popovers and Firefox/Safari are rolling support. Native features include showModal / show methods, top‑layer backdrops and focus traps. Positioning still needs work: author uses Floating UI to compute inline top/left and removes UA margin; those examples (lightbox and filter menus) behave as expected.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 1:25What are popovers
- 6:44Dialogue elements
- 9:35Popover attribute
- 14:11Modal vs non-modal
- 22:19Semantics in popovers
- 27:34Positioning popovers
- 31:47Summary and Q&A
related talks
44mDialog dilemmas and modal mischief: a deep dive into popovers
32mNative Popovers with the Popover API
31mDiving into the Toplayer: Where Dialogs, Popovers, and Modals Live
48mThe New Frontend Toolkit: Popover API, Dialog, and Next-Gen CSS
24mIndependent Popups with Element Reparenting & The HTML Popover API
44mThe Revival of Native Popups with the Popover API
47mThe future of UI is "open"
21mInstall Nothing: App UIs With Native Browser APIs