Stop reaching for JavaScript every time you need a popover. In this video, I'll show you how to build accessible, animated popovers using just HTML and CSS, including a bunch of brand new CSS features you need to know about.


- The basics of the `popover` attribute, `popovertarget`, and `popovertargetaction` for wiring up buttons
- Built-in accessibility wins: focus management, escape key handling, and the top layer
- Styling popovers with `position-area` and `margin-block-start` to anchor them to a button
- Transitioning between `display: none` and `display: block` using `transition-behavior: allow-discrete`
- Using the `:popover-open` pseudo-class, the `overlay` property, and `@starting-style` to animate entrances and exits independently


🔗  Key Links 🔗
- https://github.com/coding-in-public/popover-basics

---------------------------------------

⏲️ Timestamps ⏲️
0:00 Intro
0:15 Popover Basics
0:35 Making It Functional
2:23 Default Popover Styles
3:45 Customizing styles
4:21 Positioning With Position-Area
5:46 Advanced styling

---------------------------------------

🌐 Connect With Me 🌐 
- Astro course: https://learnastro.dev
- Website: https://codinginpublic.dev
- Blog: https://chrispennington.blog

🤝 Follow Me 🤝
- Twitter: https://twitter.com/cpenned
- BlueSky: https://bsky.app/profile/codinginpublic.dev

💸 Support Me 💸
- Patreon: https://www.patreon.com/coding_in_public
- Buy Me a Coffee: https://www.buymeacoffee.com/chrispennington

Coding in Public

A practical walkthrough of the native HTML Popover API, covering how to make popovers functional with the `popover` attribute and `popovertarget`, then how to style them using new CSS features. Topics include CSS anchor positioning with `position-area`, animating between `display: none` and `display: block` using `transition-behavior: allow-discrete`, the `overlay` property, and `@starting-style` for controlling entrance and exit animations — all without JavaScript.

Master popovers in 9 minutes