{"id":378637,"date":"2024-06-26T09:37:05","date_gmt":"2024-06-26T16:37:05","guid":{"rendered":"https:\/\/css-tricks.com\/?p=378637"},"modified":"2024-06-27T15:36:43","modified_gmt":"2024-06-27T22:36:43","slug":"poppin-in","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/poppin-in\/","title":{"rendered":"Poppin’ In"},"content":{"rendered":"\n

Oh, hey there! It’s been a hot minute, hasn’t it? Thought I’d pop in and say hello. 👋<\/p>\n\n\n\n

Speaking of “popping” in, I’ve been playing with the Popover API a bit. We actually first noted it wayyyyy back in 2018 when Chris linked up some information about the <dialog><\/code> element<\/a>. But it’s only been since April of this year that we finally have full Popover API support in modern browsers<\/a>. <\/p>\n\n\n\n

There was once upon a time that we were going to get a brand-new <popover><\/code> element in HTML for this. Chromium was working on development as recently as September 2021<\/a> but reached a point where it was dropped in favor of a popover<\/code> attribute instead<\/a>. That seems to make the most sense given that any<\/em> element can be a popover \u2014 we merely need to attach it to the attribute to enable it.<\/p>\n\n\n\n

<div popover>\n  <!-- Stuff -->\n<\/div><\/code><\/pre>\n\n\n\n

This is interesting because let’s say we have some simple little element we’re using as a popover:<\/p>\n\n\n\n

<div>👋<\/div><\/code><\/pre>\n\n\n\n

If this is all the markup we have and we do absolutely nothing in the CSS, then the waving emoji displays as you might expect.<\/p>\n\n\n\n