Support the popover API

[akionsight]

With the introduction of chrome and edge ver. 114, the popover API which allows previously hidden content to be toggled in-and-out of view.

This functionality is usually implemented with 3rd party JS libraries like Popper.js which are quite popular, even attracting sponsorships from companies like Twitch and Microsoft

As of now, Firefox on ver. 113 does not have any support, full or partial for this API; and over the coming weeks and month the usage for 3rd party JS libraries is likely to decline due to this functionality already being baked into rendering engines.

Further Reading:

https://developer.chrome.com/blog/introducing-popover-api/
https://open-ui.org/components/popover.research.explainer/

[Jon]

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.

[Kyubisation]

Popover is now supported by all major browsers apart from Firefox:
https://caniuse.com/?search=popover
https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

From what I can tell, this is being worked on with no priority?
https://bugzilla.mozilla.org/show_bug.cgi?id=1808823

This would be amazing to have, especially in context with accessibility with web components (e.g. to implement custom dialogs, tooltips, autocompletes, etc.).

[alexlehner86]

I would also love to see Firefox supporting the popover API! There are so many great use cases like: tooltips, snackbars, autocomplete, calendar picker, etc. Having popover would make it easier to create robust, accessible custom components.

[orkhanjafarovr]

I'd love to use it, but the thing that's disabled by default and user needs to enable it from config pushes me use libs like Popper.js and etc.

Is there any plan to enable it by default in the future releases ?
Any estimates maybe?

Thank you!

[reub]

is supported but not enabled by default.. why ?

[jivanova]

Is there an ETA for official release?

[YamiOdymel]

I thought it was going to be released in Firefox 124 and it just delayed.

Am I suppose to add "Stop using outdated browser like Firefox" warning on my Website 🫠?

[myrde]

I'm trying hard to continue using and supporting Firefox, but I have to admit it's a bit disheartening to see it constantly coming behind the other browsers. Ever so often I stumble upon a (more or less) new web feature which is implemented in "all" the other browsers (Chrome, Safari, Edge) and then I check Firefox and it's not there yet.

As a developer it felt like a small eternity before the :has() selector was finally supported in Firefox 121. Of course it's all relative. I still have occasional nightmares from making IE 5 exceptions to the code, but those times are long gone. Now web moves forward at an enormous pace. Web developers expect browser to adapt new features faster and faster. And sadly quite often other browsers are managing to do so faster than Firefox.

This time it's the Popover API which is super handy for many things like tooltips, popovers, autocompletes etc. I've already done a feature check in my code to use Popover API for the browsers that support it, but now I have to maintain some nasty legacy logic just for Firefox.

I have a gut feeling that the CSS anchor positioning will be the next thing that will be adapted into other browsers and then again I have to wait for Firefox to (hopefully) implement it some day. That will furthermore help me to get rid of pesky positioning code as the CSS anchor positioning takes care of that for me.

https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning

I think Firefox is in a difficult spot and I really hope that you'll find a way to get the momentum back, support new web features faster and really fight the other major browsers for a better market share. But for now I'm seriously considering to switch to Chrome and let go of the Firefox exceptions in our codebase and just forward Firefox users to a page where we suggest to use Chrome, Safari or Edge 😥️

[Honza]

Yes, we acknowledge the absence of this API in Firefox. Here is a meta bug for this API: https://bugzilla.mozilla.org/show_bug.cgi?id=1808823

(you might want to monitor it to see progress)

It is highly probable that support for Popover will be completed in 2024.

[Honza]

Support for the popover global attribute used for designating an element as a popover element is shipped with Firefox 125. The element won't be rendered until it is made visible, after which it will appear on top of other page content.

See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1866993

Kudos to the DOM team!

[myrde]

This is excellent news, thanks and major kudos for making this happen!!

[Jon]

High fives all around 🙌

This was shipped with Firefox 125 — check out @Honza's recent post in this thread for more info.

Thanks again for your help in making this happen and we look forward to continuing to collaborate with you all here on Mozilla Connect 🙌

Share your next great idea here.

[Jon]

High fives all around 🙌

This was shipped with Firefox 125 — check out @Honza's recent post in this thread for more info.

Thanks again for your help in making this happen and we look forward to continuing to collaborate with you all here on Mozilla Connect 🙌

Share your next great idea here.

[Jon]

High fives all around 🙌

This was shipped with Firefox 125 — check out @Honza's recent post in this thread for more info.

Thanks again for your help in making this happen and we look forward to continuing to collaborate with you all here on Mozilla Connect 🙌

Share your next great idea here.

[Jon]

High fives all around 🙌

This was shipped with Firefox 125 — check out @Honza's recent post in this thread for more info.

Thanks again for your help in making this happen and we look forward to continuing to collaborate with you all here on Mozilla Connect 🙌

Share your next great idea here.

[Jon]

High fives all around 🙌

This was shipped with Firefox 125 — check out @Honza's recent post in this thread for more info.

Thanks again for your help in making this happen and we look forward to continuing to collaborate with you all here on Mozilla Connect 🙌

Share your next great idea here.