👉 Start writing CSS with confidence: https://thecascade.dev/courses/css-demystified/?utm_source=youtube&utm_medium=social&utm_campaign=regular-video

🔗 Links
✅ The finished code from this video: https://codepen.io/editor/kevinpowell/pen/019edff0-144f-762c-85f3-9483030c56f4
✅ Manuel’s better popover defaults post: https://matuzo.at/blog/2026/better-defaults-for-popovers
✅ Oddbird’s dos & don’ts of anchor positioning: https://www.oddbird.net/2026/04/16/winging-it-31/
✅ Oddbird’sHere’s why your anchor positioning isn’t working: https://www.oddbird.net/2025/01/29/anchor-position-validity/
✅ Anchor positioning polyfill: https://anchor-positioning.oddbird.net/

✉ Keep up to date with everything I'm up to  https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
🎓 Start writing CSS with confidence with CSS Demystified: https://cssdemystified.com
🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell
💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@kevinpowell/join

---

🧑‍💻 My editors:
In most videos, I’m using CodePen these days: https://codepen.io/ - with High Contrast Dark theme and the font Commit Mono
And if not CodePen, then I’m probably using Zed: https://zed.dev/ with the theme Ayu Dark, and the font ZedMono
In older videos, I was using VS Code - https://code.visualstudio.com/ with the theme One Dark Pro Var, and the font Cascadia

---

⌚ Timestamps:
00:00 - Intro
00:08 - The HTML
02:22 - The user agent styles can get in the way
03:42 - Some simple overwrites you might want to use
06:05 - Positioning the popover relative to the button
07:08 - Fallbacks for when the position doesn’t fit
09:18 - Use :popover-open if you want a different display type
10:18 - Adding opening and closing transitions
15:13 - Fixing my grid columns when it closes

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:

Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

#css

Kevin Powell

A walkthrough of building native HTML popovers using the Popover API with no JavaScript. Covers the popover attribute, popovertarget wiring, CSS anchor positioning for smart placement with flip fallback, and smooth open/close animations using CSS transitions with @starting-style and transition-behavior: allow-discrete to animate between display:none and display:grid states.

Native popovers with smooth animations (no JS required)