Poppin’ In | CSS-Tricks

There was a time when we got a brand new Element in HTML for this. Chromium worked on the development not until September 2021 but it came to a point where it was dropped in favour of a popover Attribute instead ofThis seems to make the most sense considering that any Element can be a popover – we just need to append it to the attribute to activate it.

This is interesting because, for example, we have a simple little element that we use as a popover:

If this is all the markup we have and we do absolutely nothing in the CSS, the waving emoji will appear as expected.

Add: popover However, add some to the mix and it’s gone!

This is perhaps the first thing that confused me. Most of the time something disappears and I assume I did something wrong. But when you open DevTools, you see that this is exactly what is supposed to happen.

There can be multiple popovers on a page and we can distinguish them by IDs.

That is not enough, because we also need some kind of “trigger” to make the popover, well, Pop! We get another attribute that assigns each button (or button) into this trigger.

Say Hello!

Now we have a popover “targeted” at a . When the button is clicked, the visibility of the popover element is toggled.

This is where things get really exciting, because now that CSS can handle the logic for toggling visibility, we can focus more on what happens when you click.

For example, right now the emoji is surrounded by a very thick black border when it is turned on. This is a default style.

Besides the applied border, there are a few other notable things happening in DevTools. For example, notice that the calculated width and height behave more like an inline element than a block element, even though we are using a straight

— and this is true even though the element clearly calculates as display: block. Instead, we have an element that is sized to match its content and placed exactly in the middle of the page. We haven’t even added a single line of CSS!

Speaking of CSS, let’s go back to removing the default border. You might think that this can be done by not declaring a border for the element.

/* Nope  */
#wave {
  border: 0;
}

There is actually a :popover-open Pseudo-class that specifically selects the element when it is in the “open” state. I would like to call this :popover-popped but I digress. The important thing is that :popover-open only matches the popover element when it is open. This means that these styles are applied after the styles declared in the element selector, thus overriding them.

Another way to do this? Choose the [popover] Attribute:

/* Select all popovers on the page */
[popover] {
  border: 0;
}

/* Select a specific popover: */
#wave[popover] {
  border: 0;
}

/* Same as: */
#wave:popover-open {
  border: 0;
}

In this sense, we can, for example, attach an animation to the #wave in its open state. I take this idea completely from one of Jhey’s demos.

Wait, wait, there’s more! Popovers can be very similar to a

with a ::backdrop when we need it. The ::backdrop With a pseudo-element, you can give the popover a little more attention by placing it in front of a special background or hiding the elements behind it.

I love this example that Mojtaba has compiled for us in the almanac, so we’ll stick with it.

Can you imagine all the possibilities?! For example, how much easier will it be to create tooltips now that CSS has abstracted the visibility logic? Much, much easier.

Michelle Barker notes that this is probably less of a traditional “tooltip” that toggles visibility on hover, and more of a “toggletip” that is controlled by clicking. That makes a lot of sense. But the real reason I mention Michelle’s post is that she demonstrates how well the Popover API works with CSS anchor positioning as it gets wider browser support. This will help the Magic numbers for positioning that disfigures my demo.

Here is another gem from Jhey: a popover doesn’t have to be a popover. Why isn’t the Popover API repurposed for other UI elements that rely on toggle visibility, such as a slide-out menu?

Oh god, look at this: it’s getting late. There’s a lot more to learn about the Popover API that I don’t quite understand yet, but even the little I’ve played around with seems very helpful. I’ll include a list of things I’ve bookmarked to come back to. But for now, thanks for letting me pop just come back to say hello.

[ad_2]

Source link