Post

If you're not using popovers yet...why not!? - Accessible by default - No JavaScript - Baseline 2025 Master popovers in 9 minutes 👇 youtu.be/sl_cGD327BY

Chris Pennington

@codinginpublic.dev

7 July

At it's most basic: - Open button: popovertarget pointing to ID - Popover: attribute of popover (with an ID) - Close buttons: same as open, but with popovertargetaction="close"

Chris Pennington

@codinginpublic.dev

The browser adds default styling, but you can use modern CSS to make it your own: - transition-behavior: allow-discrete - @⁠starting-style - position-area - :popover-open pseudo attribute

7/7/26, 1:04 pm0 reposts1 like

Chris Pennington

@codinginpublic.dev

7 July

Here's my finished code: github.com/coding-in-p...

github.comGitHub - coding-in-public/popover-basicsContribute to coding-in-public/popover-basics development by creating an account on GitHub.

Chris Pennington

@codinginpublic.dev

7 July

Watch the video for the full walkthrough 👇 youtu.be/sl_cGD327BY