Native Popovers with the Popover API

on YouTube ↗32m

" summary

Egor Levchenko explains how to implement modals, lightboxes and tooltips using the browser-native Popover API to minimize (or eliminate) JavaScript. The talk covers practical techniques for building interactive UI elements with native popovers and discusses current browser support for the Popover API.

AI-written summary · about

" chapters (17)

1. 0:00Introduction
2. 1:34What are popovers
3. 3:01Popover terminology
4. 5:51Popover requirements
5. 6:14Life before Popover API
6. 7:17Popover API basics
7. 9:01Styling and animation
8. 11:48Security and limits
9. 12:32Practical Popover API
10. 13:55Popover in React and legacy
11. 16:43Accessibility and semantics
12. 17:25Future of HTML and Popover
13. 18:50Q&A
14. 24:09Should you use Popover API
15. 27:01Customization and features
16. 30:16Testing and performance
17. 32:01Summary and Q&A

" related talks

• 44mThe Revival of Native Popups with the Popover APIJosiane MAKELELE · DevFest Lille 2024
• 32mHow popovers are about to become a whole lot easier to buildHidde de Vries · HalfStack Vienna 2023
• 48mThe New Frontend Toolkit: Popover API, Dialog, and Next-Gen CSSEric Veliyulin · NDC London 2026
• 44mDialog dilemmas and modal mischief: a deep dive into popoversHidde de Vries · CSS Day 2023
• 24mIndependent Popups with Element Reparenting & The HTML Popover APIAdam Niederer · XtremeJS 2024
• 21mInstall Nothing: App UIs With Native Browser APIsScott Tolinski · JSNation 2024
• 31mDiving into the Toplayer: Where Dialogs, Popovers, and Modals LiveTim Damen · UtahJS Conf 2025
• 47mThe future of UI is "open"Brecht De Ruyte · NDC London 2025