Hello there! It’s been a while, hasn’t it? I thought I’d stop by and greet you. đź‘‹
Recently, I’ve been experimenting with the Popover API, which we first discovered back in 2018. It’s exciting to see that modern browsers now fully support the Popover API since April of this year.
Initially, there were talks about introducing a new <popover>
element in HTML, but Chromium decided to go with a popover
attribute instead. This attribute allows any element to become a popover by attaching it.
For example, a simple element like <div>đź‘‹</div>
can be turned into a popover by adding the popover
attribute, which hides the element when applied.
To differentiate between multiple popovers, IDs can be used. Additionally, a trigger attribute, such as popovertarget
, can be added to a button to toggle the visibility of the popover element.
With CSS now capable of handling logic to toggle visibility, we can focus on customizing the appearance and behavior of popovers. For instance, adding animations when the popover is open, styling the backdrop with the ::backdrop
pseudo-element, or applying specific styles using the :popover-open
pseudo-class.
The possibilities with the Popover API are endless. Creating tooltips, toggletips, or even repurposing popovers for other UI elements like slide-out menus is now easier than ever.
As the Popover API gains wider browser support, the combination of CSS anchor positioning and the Popover API will streamline UI design and eliminate the need for hardcoded positioning values.
There’s still much to explore with the Popover API, but even the initial experiments have been promising. I’ll leave you with some bookmarked resources to delve deeper into this topic. Thanks for letting me share this exciting development with you!