To my great surprise – the world has been turning a little faster lately – the popover attribute is already so widespread that we could use it. For all of you who have been living under a rock like me: with the popover attribute we can mark any element as a popover element, which is then initially display: none until it is called by a button or anchor that has entered its ID as popovertaget (or via JS HTMLElement.showPopover()). The element is then displayed similarly to a <dialog>, including a possible ::backdrop and everything. So like this:
<div id="mypopover" popover>Pop!</div>
<button popovertarget="mypopover">Let's pop!</button>
This is good because it is more flexible than the <dialog> element, which I usually use for such tasks. popover comes with its own Popover API. The behavior of <dialog> often had to be adapted and redirected (attention: focus!) for the things where we used it. With popover we now have an alternative. The most important thing about it is of course that we can drop complicated JavaScript for tooltips, coachmarks, menu overlays, etc.
Now the question naturally arises: what do we make into a popover and what remains dialog? And which problems that have previously been solved differently will be made easier with popover? A nice example of navigation can be found in this Codepen (via Jared White). Michelle Barker has a solution for tooltips that appear after a user action and which she therefore rightly calls Toggltips (via). The toggle tips show how progressive enhancement works without scripts: in Firefox, the necessary CSS Anchor Positioning is not yet implemented, there a click on a superscript number takes us to the bottom of the page (like a footnote), in Chrome, however, the toggle tip is then shown in all its beauty.
And what about accessibility? The relevant article on this was written by Hidde de Vries and Scott O’Hara, the good news: as long as a <button> is used to trigger the popover, the appropriate aria-expanded states are automatically included. However, since popover is only an attribute and not a separate element, we can quickly get into trouble with the role of the element, as the browser does not change it.
The popover attribute provides a starting point for building popover-like interactions on the web. Browsers don’t magically make your components accessible, that’s not a thing. But there are some specific keyboard behaviours included with popover […].