Popover

[stof]

Description

The popover attribute allows creating dropdown UIs using platform features, solving the case of a dropdown being cut by the overflow behavior of the container (as it goes in the top layer) and without requiring JS to trigger it (thanks to popovertarget.

This is already implemented in Blink and is partially implemented in Webkit. Reaching interop would allow relying on it.
Thus, due to the top-layer behavior, it is hard (or maybe even impossible) to polyfill this feature.

Specification

https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribute

Open Issues

No response

Tests

https://wpt.fyi/results/html/semantics/popovers?label=master&label=experimental&aligned

Maybe also https://wpt.fyi/results/close-watcher/popover-closewatcher.html?label=master&label=experimental&aligned and https://wpt.fyi/results/close-watcher/popover-closewatcher-multiple-plus-free.html?label=master&label=experimental&aligned but not sure about them

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

mozilla/standards-positions#698

WebKit/standards-positions#74

Browser bug reports

https://bugzilla.mozilla.org/show_bug.cgi?id=1808823
https://bugs.chromium.org/p/chromium/issues/detail?id=1307772
https://bugs.webkit.org/show_bug.cgi?id=250171

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

No response

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[foolip]

cc @stubbornella @mfreed7 @una

[nt1m]

WebKit implements everything except popover=hint, which does not have a spec yet (hence isn't eligible for Interop 2024).

[mfreed7]

popover=hint, which does not have a spec yet (hence isn't eligible for Interop 2024).

I agree with this part, with the caveat that we've got a spec PR open now to add popover=hint behavior. I'd love to get that reviewed and then add it to Interop 2024 if that's still possible!

[foolip]

In preliminary results for State of HTML 2023, popover was the most common response to the freeform question "Which existing HTML features or browser APIs are you unable to use because of browser differences or lack of support?" See #550 for details.

[lukewarlow]

https://bugs.webkit.org/show_bug.cgi?id=263081 - This is an example of an interop bug with Popover implementations.

[nt1m]

Someone would need to write a WPT for it

[foolip]

Also from State of HTML preliminary results, Popover was the feature that respondents expressed the most interest for. Note that this wasn't freeform, it's based on the features the survey asked about experience and sentiment for.

[LeaVerou]

@foolip You're burying the lede a little bit 😅 Popover came up all over the survey, in freeform and non-freeform questions. The need for native popovers was probably one of the biggest themes (2nd only after stylability IMO).

Most interesting known features (not freeform)

Out of the respondents who had heard each feature, what % were interested?

Popover is the first, with 52% of those who had heard it but not used it selecting that they were interested!

Most interesting unknown features (not freeform)

Out of the respondents who had not heard each feature, what % were interested?

46% of people who had not even heard of the Popover API before the survey selected they were interested.

Top interop pain points

“Which existing HTML features or browser APIs are you unable to use because of browser differences or lack of support?”

2700 issues / 1755 responses, manually classified

Popover is the first one, occupying almost 10% of all complaints!

Unable to use for other reasons

Which existing HTML features or browser APIs are you unable to use for other reasons (and why)?
Good candidates might be existing HTML features that you often have to recreate or augment using JS.

Popover is 6th here too, despite not really being relevant (since it's not yet supported really). I suspect people misread the questions and entered things that would be more relevant in the question above (i.e. due to browser support)

Top interactivity pain points (freeform)

What are your pain points around dynamic HTML changes?
Browser incompatibilities or lack of support, missing features, and other problems you face around interactive elements and behaviors (except forms), DOM manipulation, events, and related APIs.

12th most common complaint was related to the lack of popovers.

[foolip]

Thank you @LeaVerou for summarizing with nice screenshots!

[jensimmons]

Could someone create a link to the tests that will likely be included, without any of popover=hint, (since it does not have a spec yet and therefore is not eligible for Interop 2024).

[mfreed7]

Could someone create a link to the tests that will likely be included, without any of popover=hint, (since it does not have a spec yet and therefore is not eligible for Interop 2024).

The OP contains the correct link to the tests: https://wpt.fyi/results/html/semantics/popovers?label=master&label=experimental&aligned

I tried, and failed, to come up with a search term that eliminates the tests that end in .tentative.html, but wpt.fyi's search syntax is... different than I'm used to. I did verify that all popover tests that use/test non-standard features (including popover=hint and anchor positioning) are correctly marked with .tentative.html.

[gsnedders]

https://wpt.fyi/results/html/semantics/popovers?label=master&label=experimental&aligned&q=not%20is%3Atentative does that.

[mfreed7]

https://wpt.fyi/results/html/semantics/popovers?label=master&label=experimental&aligned&q=not%20is%3Atentative does that.

So simple! Thanks.

[gsnedders]

Do these tests not rely on anchor positioning?

[mfreed7]

Do these tests not rely on anchor positioning?

Hmm, those are good to highlight. Most rely on just the anchor attribute, and not all of anchor positioning. But you're right that none of that is standardized at the moment. We should probably rename those back to .tentative. I'll take care of that...

[mfreed7]

web-platform-tests/wpt#43121

[stof]

Actually, https://wpt.fyi/results/html/semantics/popovers/popover-invoking-attribute.html?label=experimental&label=master&aligned&q=not%20is%3Atentative contains a bunch of sub-tests that are for popover=hint (see the tests with missing results in Safari and Firefox). Those should probably be extracted in a separate tentative test.

[lukewarlow]

Just as an fyi there's a firefox intent to ship

https://groups.google.com/a/mozilla.org/g/dev-platform/c/hrCP5RBO7mA/m/7w-1OsmbAQAJ

[mfreed7]

Actually, https://wpt.fyi/results/html/semantics/popovers/popover-invoking-attribute.html?label=experimental&label=master&aligned&q=not%20is%3Atentative contains a bunch of sub-tests that are for popover=hint (see the tests with missing results in Safari and Firefox). Those should probably be extracted in a separate tentative test.

Another good point. In progress: web-platform-tests/wpt#43436

[stof]

@mfreed7 thanks.
Looking at those in more details, the test titles in https://wpt.fyi/results/html/semantics/popovers/popover-stacking.html?label=experimental&label=master&aligned make me think that this non-tentative test also includes some sub-tests relying on anchor positioning, that should also be tentative.

[wpt-interop]

This proposal has been accepted as part of Interop 2024! On behalf of the entire Interop team, thank you for proposing it. You’ll be able to track progress on this topic throughout the year via the Interop 2024 dashboard.

[zcorpan]

Thank you for proposing Popover for inclusion in Interop 2024.

We are pleased to let you know that this proposal was accepted as part of the Popover focus area. You can follow the progress of this focus area on the Interop 2024 dashboard.

For an overview of our process, see the proposal selection. Thank you for contributing to Interop 2024!

Posted on behalf of the Interop team.

[lukewarlow]

I'm not sure where is the most appropriate place to raise this so noting here.

html/semantics/popovers/popover-shadow-dom.html - This test is part of interop2024 but has 2 subtests that rely on the anchor attribute which isn't part of interop (nor specced fully afaik).

[nt1m]

@mfreed7 Can we get these split out from the test ?

[zcorpan]

Thanks @lukewarlow

I'm not sure where is the most appropriate place

A "Test Change Proposal" issue: https://github.com/web-platform-tests/interop/issues/new/choose

[mfreed7]

I'm not sure where is the most appropriate place to raise this so noting here.

html/semantics/popovers/popover-shadow-dom.html - This test is part of interop2024 but has 2 subtests that rely on the anchor attribute which isn't part of interop (nor specced fully afaik).

Yep, I can take care of this. I'll comment back here with a PR once I've had a chance to get it started.

[mfreed7]

Yep, I can take care of this. I'll comment back here with a PR once I've had a chance to get it started.

web-platform-tests/wpt#44679

[promocot]

::backdrop not supported css variable!

Example

::backdrop {
background: oklch(11.63% .045 var(--prm-hue) / 80%);
backdrop-filter: var(--blur-1);
}

Variables won't work! If to change on

::backdrop {
background: oklch(11.63% .045 282 / 80%);
backdrop-filter: blur(4px);
}

all will be works

[foolip]

@promocot if you're running into this issue in Chrome, it was fixed in https://chromestatus.com/feature/4875749691752448, in Chrome 122.

https://wpt.fyi/results/html/semantics/interactive-elements/the-dialog-element/backdrop-inherits.html?label=master&label=stable is the relevant test for this, and it looks like it was previously failing (but now passing) in Safari as well.

If you have a problem in the latest version of each browser, please file bug reports in the appropriate bug tracker.

[promocot]

Hello, thanks, I tried to update manual my chrome browser, and yep after works, but i found another bug with close popover on clic to icon. For example, I have a HTML

<button popovertarget="mypopover" popovertargetaction="show">Show popover</button>
<button popovertarget="mypopover" popovertargetaction="hide">Hide popover</button>
<div id="mypopover" popover="">Popover content</div>

If I click on show button i will see popup, if i click on hide button i will close popup, but if i have structure like this

<button popovertarget="mypopover" popovertargetaction="show">
  Show popover

<div id="mypopover" popover="">Popover content
      <button popovertarget="mypopover" popovertargetaction="hide">Hide popover</button>
</div>

when i click on show button i will see popup, and if i try to click on the hide button, nothing happens

[foolip]

@promocot I see you're missing a </button> in that second example, but with or without it still works in my testing, clicking "Hide popover" closes it.

If you have more question please try Stack Overflow, and if you think there are browser bugs file a bug with the appropriate browser.

This issue was to track popover for inclusion in Interop 2024, and is not a good place to ask for help with popover.

[promocot]

I am not missing the button in the second example, I place the button inside the popover as a close button. I tested in chrome. Ok i will try to write email for chrome developers

[promocot]

I found a problem, in my test case i used attribute for SVG icon not button

but if I add a button with an icon, and set the attribute for the button, all works

[foolip]

@promocot that's interesting, do you mean you were trying to add the popovertarget or popovertargetaction attributes to an SVG element? This probably doesn't work the way the spec is written, can you file an issue at https://github.com/whatwg/html/issues with a code sample of what you were attempting?

[promocot]

Yes, I will write about this with a video demo and codeopen