Popovers, dialogs, and floating elements on a web page have always been a challenge for any developer.
Since the beginning of the web era, there have been different approaches to providing feedback to users. Libraries and metaframeworks have developed sophisticated components, heavily relying on JavaScript. All of them faced notorious challenges, such as consistent positioning and foreground placement (the 'z-index war').
In recent years, the W3C and browser engines have put massive effort into unifying UI components. The Popover API recently reached Baseline, meaning it is now available in all major browsers.
This is great news and a game-changer. CSS and HTML now natively support popovers; we no longer need to import heavy external libraries or build complex custom logic. The browser handles it for us: clean and fast.
All we need is the "popovertarget" attribute on a trigger (like a button) and the "popover" attribute on the element we want to show. We can control the behavior further using the Popover API (check MDN for the full spec).
Combined with another amazing new feature, CSS Anchor Positioning, implementing floating elements is finally simple and lightweight. Hats off to the CSS Working Group for making our lives easier (and working with CSS more fun!)
Here is a great article from the amazing Una Kravets (if you are interested in this topic, I strongly recommend following her and listening to 'The CSS Podcast') explaining the full potential of the Popover API: Introducing Popover API
