Poppin' In

Hey there! Long time no see! Just wanted to pop in and say hello. ?

Speaking of "popping" in, I've been experimenting with the new Popover API. We first mentioned it back in 2018, but full support in modern browsers is only recent (April 2024).

Initially, a dedicated <popover></popover> HTML element was planned. Chromium worked on this until September 2021, but it was ultimately replaced by a popover attribute. This makes sense, as any element can now function as a popover – simply add the attribute.

```html

<code>
Here's an interesting observation: a simple element like this:

```html
<div>?</div></code>

...displays normally. However, adding the popover attribute hides it! This initially confused me, but DevTools confirmed it's expected behavior.

Multiple popovers are possible, differentiated by IDs:

<div popover="id1"></div>
<div popover="id2"></div>

A "trigger" is needed to activate the popover. Another attribute transforms any button (or button-like element) into this trigger:

<button>Say Hello!</button>
<div popover="">?</div>

Clicking the button toggles the popover's visibility. CSS handles the visibility logic, allowing us to focus on the click event. For example, a thick black border is the default style when the popover opens.

DevTools reveals other interesting details: the popover's width and height behave like inline elements, even with display: block. It's sized to content and centered, all without custom CSS!

Removing the default border isn't as straightforward as border: 0;. The :popover-open pseudo-class styles the element only when open, overriding earlier styles.

Alternatively, select the [popover] attribute:

/* All popovers */
[popover] { border: 0; }

/* Specific popover */
#wave[popover] { border: 0; }

/* Equivalent to :popover-open */
#wave:popover-open { border: 0; }

This allows adding animations to the open state (inspired by Jhey's demos).

Furthermore, popovers can include a ::backdrop pseudo-element, similar to <dialog></dialog>, for visual effects. Mojtaba's Almanac example is excellent.

The possibilities are vast! Tooltips become much simpler with CSS handling visibility. Michelle Barker points out this is more of a "toggletip" (click-controlled) than a hover tooltip, and her post shows how well it integrates with CSS Anchor Positioning (as support grows).

Jhey's another great resource, highlighting that a popover isn't limited to popovers; it can be repurposed for other UI elements with toggled visibility, like slide-out menus.

It's getting late, and there's much more to explore, but even this initial foray is promising. Here's a list of resources for further learning:

• Popover accessibility: browser behavior (Hidde de Vries)
• Using popover and <dialog></dialog> for modals (Hidde de Vries)
• Open UI and the Popover API (Brecht De Ruyte)
• Popovers and Dialogs (Adrian Roselli)
• Advanced Form Control Styling (Brecht De Ruyte)
• Popover API for HTML Tooltips (Chris Coyier)
• Comparing Popover API and <dialog></dialog> (LogRocket)

Thanks for letting me pop in!

The above is the detailed content of Poppin' In. For more information, please follow other related articles on the PHP Chinese website!