One of the hard parts of popovers and tooltips is inevitably their positioning. Between their positioning, their accessibility, and all of the interactions around them it is no wonder it is one of those things that we usually just go find a library to help us accomplish. With the new Popover API and anchor positioning though, it is now easier than ever to create them ourselves by leveraging some of the new CSS properties currently being developed which significantly decrease the amount of JavaScript we need to write. In this talk we will cover
The difference between dialog and popover
- Using the
<dialog>element to create a dialog and the CSS properties to style it and its backdrop - Creating popovers and positioning them
- How popovers lead the way to the new
<selectmenu>element