Poppin’ In | CSS-Methods

Oh, hey there! It’s been a sizzling minute, hasn’t it? Thought I’d pop in and say whats up. 👋

Talking of “popping” in, I’ve been enjoying with the Popover API a bit. We really first famous it wayyyyy again in 2018 when Chris linked up some details about the <dialog> ingredient. Nevertheless it’s solely been since April of this 12 months that we lastly have full Popover API assist in trendy browsers.

There was as soon as upon a time that we have been going to get a brand-new <popover> ingredient in HTML for this. Chromium was engaged on growth as lately as September 2021 however reached some extent the place it was dropped in favor of a popover attribute as a substitute. That appears to take advantage of sense on condition that any ingredient could be a popover — we merely want to connect it to the attribute to allow it.

<div popover>
  <!-- Stuff -->
</div>

That is fascinating as a result of let’s say now we have some easy little ingredient we’re utilizing as a popover:

<div>👋</div>

If that is all of the markup now we have and we do completely nothing within the CSS, then the waving emoji shows as you may anticipate.

Add that popover attribute to the combo, nonetheless, and it’s gone!

That’s maybe the very first thing that threw me off. Most occasions one thing disappears and I assume I did one thing fallacious. However cracking open DevTools exhibits that is precisely what’s alleged to occur.

There could also be a number of popovers on a web page and we will differentiate them with IDs.

<div popover id="tooltip">
  <!-- Stuff -->
</div>

<div popover id="notification">
  <!-- Stuff -->
</div>

That’s not sufficient, as we additionally want some form of “set off” to make the popover, nicely, pop! We get one other attribute that turns any button (or <enter>-flavored button) into that set off.

<button popovertarget="wave">Say Hiya!</button>
<div popover id="wave">👋</div>

Now now we have a popover “focused ” to a <button>. When the button is clicked, the popover ingredient toggles visibility.

That is the place stuff will get actually enjoyable as a result of now that CSS is able to dealing with logic to toggle visibility, we will focus extra on what occurs when the press occurs.

Like, proper now, the emoji is framed by a very thick black border when it’s toggled on. That’s a default fashion.

A number of different noteworthy issues are happening in DevTools there apart from the utilized border. For instance, discover that the computed width and top behave extra like an inline ingredient than a block ingredient, although we’re working with a straight-up <div> — and that’s true although the ingredient is clearly computing as show: block. As an alternative, what now we have is a component that’s sized in keeping with its contents and it’s positioned within the lifeless heart of the web page. We haven’t even added a single line of CSS but!

Talking of CSS, let’s return to eradicating that default border. You may assume it’s attainable by declaring no border on the ingredient.

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

There’s really a :popover-open pseudo-class that selects the ingredient particularly when it’s in an “open” state. I’d love this to be referred to as :popover-popped however I digress. The vital factor is that :popover-open solely matches the popover ingredient when it’s open, which means these types are utilized after these declared on the ingredient selector, thus overriding them.

One other manner to do that? Choose the [popover] attribute:

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

/* Choose a selected popover: */
#wave[popover] {
  border: 0;
}

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

With this in thoughts, we will, say, connect an animation to the #wave in its open state. I’m completely taking this concept from one among Jhey’s demos.

Wait, wait, there’s extra! Popovers could be a lot like a <dialog> with a ::backdrop if we’d like it. The ::backdrop pseudo-element may give the popover a little bit extra consideration by setting it towards a particular background or obscuring the weather behind it.

I like this instance that Mojtaba put collectively for us within the Almanac, so let’s go together with that.

Are you able to think about all the probabilities?! Like, how a lot simpler will it’s to create tooltips now that CSS has abstracted the visibility logic? A lot, a lot simpler.

Michelle Barker notes that that is most likely much less of a conventional “tooltip” that toggles visibility on hover than it’s a “toggletip” managed by click on. That makes a variety of sense. However the true purpose I point out Michelle’s submit is that she demonstrates how properly the Popover API must work with CSS Anchor Positioning because it positive factors wider browser assist. That may assist clear out the magic numbers for positioning which can be littering my demo.

Right here’s one other gem from Jhey: a popover doesn’t need to be a popover. Why not repurpose the Popover API for different UI parts that depend on toggled visibility, like a slide-out menu?

Oh gosh, have a look at that: it’s getting late. There’s much more to the Popover API that I’m nonetheless wrapping my head round, however even the little bit I’ve performed with seems like it’ll go a good distance. I’ll drop in a listing of issues I’ve bookmarked to come back again to. For now, although, thanks for letting me pop again in for a second to say hello.