No more dreadful dropdowns — long live Popover!

Dropdowns seem straightforward, but many hours go into building a simple button that triggers another element on click. The same goes for toasts, popups, and many other components. 

Dropdowns are complex to build because you have to factor in many elements. You have to consider where the dropdown sits, how its response is triggered, where it needs to pop up, how it sits on top of other content, how you close the popup, and so much more. How something so small can get so complex is beyond us, but we get it, and that’s why we are incredibly excited about this week’s Firefox announcement. 

This week, Firefox released support for the popover API. Firefox was the last browser to support the Popover API, but now they do, which means we now have full support across all the major browsers. This support is crucial because it turns the terrifying tooltip into a fluffy bunny, or at the very least, much simpler to build. 

The popover API makes it infinitely easier to create components like toasts, dialogs, and, yes, you guessed it, dropdowns.

A Popover, what now?

A popover is an element that pops over other content on the screen. Its basic concept is an element triggered by an action that pops over existing content. A popover consists of a button, a popover element, and the triggers that execute the intended behavior.

One of the places you can use Popover in toddle is for our color picker. It’s an element that’s hidden by default, and we hide it because you only need it when you need to change the color of another element. 

When you build apps, you spend a lot of brain power on how these elements behave, interact, and look. The new Popover API takes many of these decisions off your hands, making it much faster for you to build, and the best part is that you don't have to use any Javascript to make them come to life. 

A new CSS feature: Top layer

If you've ever built an application, there's a good chance you have fiddled with Z-index one too many times. Top layer makes this go away. You can now send an element to a layer on top of the page when opening a popover or a dialog, and it comes with light-dismiss for free. Top layer makes styling more consistent and gives you more control.

How do I use Popover in my dev process?

It’s pretty easy. Watch how Andreas showcases how Popover works and how to use it in toddle. 

In short, you can give your popover element a series of attributes that determine how elements react. 

Attributes

id: Helps the browser understand which element has which attributes (You define the id).
popover: Determines how elements are dismissed ("auto" or "manual").
popovertarget: Turns a <button> or <input> element into a popover control button.
popovertargetaction: Specifies the action to be performed ("hide," "show," or "toggle.")

The popover API also has some neat CSS features that help you style different aspects of the popover.

CSS features

::backdrop: Style the fullscreen element placed directly behind popover elements.
:popover-open: Style popover elements when they are showing.

Learn more about Popover

You can see how Popover is set up in a real app here . Feel free to dig around, test it live or read the documentation:

mdn popover documentation
Firefox announcement
Chrome announcement
Popover review