Menus, toasts and more with the Popover API, the dialog element, invokers, anchor positioning and @starting-style – Frontend Masters Boost
March 6, 2024
Popovers do, however, bring far more to the table:
- Popovers make use of the top layer.
- Light-dismiss functionality: clicking outside of the popover will close the popover.
- Hitting the escape key will close the popover.
- Focus management: when you open a popover, the next tab stop will be the first focusable element inside the popover. If you’ve focused an element within the popover and then close the popover, focus is returned to the correct place (this was tricky to get right with JavaScript).
If you’ve built anything for the web chances are you’ve built some sort of “popover”. And like all controls what might to the uninitiated seem straigthforward comes with a lot of subtleties if done right.
This is an in-depth introduction to the relatively new popover attribute, and associated technologies and practices.
