13 ms·
Popover API
- mdev23 2y agowhat a time to be alive
- niek_pas 2y agoThis sounds cool, but why does this page not have any images showing what a 'popover' is?
- charlesabarnes 2y agoIt has a link to examples that can be found here https://mdn.github.io/dom-examples/popover-api/ https://mdn.github.io/dom-examples/popover-api/
- simonw 2y agoThat would be useful. They do link to these interactive examples - looks like the default styles for popovers are not very exciting: https://mdn.github.io/dom-examples/popover-api/ https://mdn.github.io/dom-examples/popover-api/
- slmjkdbtl 2y agoHow would you prefer it? I think the default styles (on chrome) are just enough, looks consistent with the rest of the default HTML styles.
- 1231232131231 2y agoDefault styles only make things harder to customize. If we didn't have so many useless/ugly default styles, we wouldn't need reset.css/normalize.css
- felsokning 2y ago> The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Paywall 2.0?
- p_l 2y agoI've used it to implement windows for drilling deeper into rarely used settings in a web-based HMI. It makes for very simple design compared to using JavaScript, and provides easy layering in DOM for it (including if you want to just delete the popover :D)
- cqqxo4zV46cp 2y agoThe lack of this API wasn’t stopping anyone from implementing a paywall.
- felsokning 2y ago> The lack of this API wasn’t stopping anyone from implementing a paywall. Obviously -- that's inferred by the 2.0.
- Waterluvian 2y agoVery cool. So if I understand correctly, this doesn’t really introduce any new capability, it just streamlines the need to have a modal div, mask div, container div, and some uncomfortable positioning CSS? It also adds some pseudo classes to simplify styling. I like it.
- devmor 2y agoThe API it introduces also allows the control of popover elements’ visible state in the DOM without any javascript. That is definitely useful.
- _heimdall 2y agoIt also allows for the basic functionality without JS (and without overloading a hidden checkbox). I'm not sure how far that will get you so maybe JS will be needed for a styled and animated popover, but no-JS support with focus handled properly is nice. I want to say there was also accessibility support built in but now I don't see it in the spec. If it handles announcing the elements to accessibility tools like a screen reader that'll really help too, its pretty easy to forget to do it manually.
- jacobgorm 2y agoI absolutely see the need for this if implemented in concert with the host OS windowing system, because current popovers must be emulated in a way that does not always work well. For example, a browser-native <select> today will be able to expand beyond the borders of the hosting browser window, so you can don't have to worry about it getting clipped to the window borders, but a fancy emulated select from toolkit like Quasar will not, ,which limits its placement options. So to do this right on win32 you would need each popover to have its own native HWND and on Cocoa/macOS you would need it in its own NSView. Does anybody in here know if this is how it is actually implemented in the current browsers, or is it just a paint-over job inside the browser window?
- oefrha 2y agoThese popovers are just regular DOM nodes styled with regular CSS. Giving websites a vector to paint outside the designated viewport (except in extremely limited circumstances like alert(), confirm(), [title], <select>, etc.) makes it a lot easier for them to convincingly emulate browser and OS dialogs. It's a massive security risk, I don't think it's worth the limited upside. Concrete example: a page emulating your password manager extension's unlock widget. Edit: Note that this is not a theoretical concern. Scammers over the years have created extremely convincing fake UI elements, including fake popup windows complete with the browser chrome. They're even draggable. Not being to paint past the viewport boundary is one of very few, if not the only limitation they couldn't get around.
- threatofrain 2y agoLet's say there's a native app that can also do pop ups. What's to stop the native app from basically stealing the likeness of your password manager? In other words, as web apps seek to become like native apps, they may also accrue the risks which are characteristic of that space.
- oefrha 2y agoNative apps have to be installed. You don't want to give every power they have to random websites (say, that phishing domain at the top of a Google SERP), not for a very good reason. "My custom dropdown can't draw past the boundary of the viewport" isn't a very good reason.
- eknkc 2y agoThere is also <dialog> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...) if you want modal dialogs.
- layer8 2y agoAs mentioned in the first few paragraphs of TFA.
- threatofrain 2y agoI'd warn that there's a fair bit of work you have to do to get animations and typical modal behavior working up to the level of modern day expectations. It's completely surmountable but also quite non-trivial.
- dialogawesome 2y agoI don't agree as I have converted all the modals/dialog in my web app to <dialog> and boy it has been a breeze. A few killer features: - Goodbye z-index, since the last opened dialog always get's promoted to the top in #top-layer [1] - Free focus handling, it doesn't trap focus inside dialog but that's kinda opinionated anyway [2] - styling and animation is EASY with `@starting-style` and `allow-discrete` and can even use view-transitions [3] Here's a basic sliding in drawer with blurred background I have in svelte: <style> dialog::backdrop { backdrop-filter: blur(4px); } /* IS-OPEN STATE / dialog[open] { translate: 0 0; } / EXIT STATE / dialog { transition: translate 0.2s ease-out, overlay 0.2s ease-out, display 0.2s ease-out allow-discrete; translate: 384px 0; } / 0. BEFORE-OPEN STATE */ @starting-style { dialog[open] { translate: 384px 0; } } </style> ``` Some of the features are not yet available in firefox and safari but they are coming soon and they have minimal workarounds available now [4] for animating `display: none` etc. So, I'd say it's time we retire that quirky UI library's dialog. [1] https://developer.chrome.com/blog/what-is-the-top-layer https://developer.chrome.com/blog/what-is-the-top-layer [2] https://github.com/whatwg/html/issues/8339 https://github.com/whatwg/html/issues/8339 [3] https://developer.chrome.com/blog/entry-exit-animations https://developer.chrome.com/blog/entry-exit-animations [4] https://codepen.io/kevinpowell/pen/QWaBeGm https://codepen.io/kevinpowell/pen/QWaBeGm
- sseagull 2y agoKinda funny that browsers have built-in pop-up blockers, but then create APIs like this. Yes I know the difference, but still. I’m old enough to remember the pop-up and pop-under wars of the late 90s and early 2000s. I guess we won that particular battle, but the war for our attention is far from over.
- jjice 2y agoI get the gist of what you're saying, but I don't think they're really comparable. Popups spam your OS with trash that impairs your ability to use your machine (at worst). Popover dialogs can be shut down by closing your tab and nothing more. We've also had these style of popovers for a while now because they're generally a really handy way of presenting info. Yeah, they can be used in annoying ways, but there are lots of genuine usecases, like a modal.
- bestest 2y agoI think you're comparing apples with grapples. A popover is floating element that appears to display a contextual piece of information when required. What you're mentioning is something completely different.
- alt227 2y ago> What you're mentioning is something completely different. I think that is because the term 'Pop-up' has changed. It used to mean the opening of a new browser window, typically smaller than the host window and floating somewhere on top. Now it means a modal form within the same window and dom.
- deleted 2y ago[deleted]
- The_Colonel 2y agoI don't think this is often called "pop-up", mostly I see either popover or tooltip.
- bityard 2y agoAs someone who does some (but not a lot of) web development, I guess the only thing I care about is: can I turn this off with uBlock Origin?
- tootie 2y agoNope. Not if the pop-up is first party.
- anamexis 2y agoYes you can - uBlock Origin lets you apply CSS rules, and popovers can easily be hidden with the [popover] selector.
- KMnO4 2y agoThat’s like asking if you can turn off <form>s. Not sure why you’d want to. It’s a perfectly reasonable component that doesn’t need to be abused for ads.
- limbero 2y agoSeems like you could, since it has an attribute and a pseudo class to select on. document.querySelectorAll("[popover]:popover-open") should select all visible popovers. AFAIK uBlock uses regular CSS selectors.
- clementmas 2y agoI use <dialog> a lot when building websites. I don't run any ads nor promotional content so if that element was blocked it would break lots of features.
- silverwind 2y agoI wonder why there is no corresponding `role="popover"` HTML attribute yet.
- megaman821 2y agoThe docs warn that there is no role associated with the popover attribute because it could be a menu, tooltip, etc., and you should put the correct role on it. Accessibility-wise it does take care of the item with the popovertarget, so you don't have to put aria-controls and aria-expanded.
- ikesau 2y agoin terms of accessibility, i imagine a universal standard for modal state management will be an improvement over the bespoke approach - closing when the user presses escape, focus handling, etc. but i really wish popover=hint made it into the spec. would have been nice to get a native alternative to tippy.js
- b1tr0tt 2y agoStandards work is progressing on this, hopefully this year.
- globalise83 2y agoAnother extremely useful feature that won’t work for our Safari users with any older than 1 year old iPhones and means for the next five years we have to support both this API and a full-blown polyfill or alternative implementation.
- afavour 2y agoTwo year old iPhones are absolutely able to upgrade to iOS 17 and receive this feature, all the way back to iPhone 8. That said, I do wish Apple had their browser set up like Google does with a complete upgrade possible via the App Store. It feels unnecessary to completely tie it to the OS version.
- pmontra 2y agoI don't know how iOS works but if it was an app would other browsers be able to use Safari's rendering engine? There is also the lower functionality JS engine that Apple forces those browsers to use (if I'm not mistaken.)
- afavour 2y agoThe way it works on Android is that the system web view is an "app" (though not one you can launch) that updates via the Play Store. Any app using webviews automatically gets the upgraded experience whenever that app gets upgraded.
- jimbobthrowawy 2y ago> though not one you can launch Try the app "Activity launcher" on your phone some time. Lets you open any Activity (android class that apps are composed of) on your device.
- monsieurbanana 2y agoIs it recommended to update iOS with old phones? Not recommended by Apple, actually recommended as in it won't slow your phone to a crawl.
- algasami 2y agoThe pessimist inside me worries about whether this could be used to lure people into revealing their credentials; granted, there are thousands of ways to do this easily, but I'm still cautiously optimistic on this topic.
- cjaybo 2y agoSaw an interesting case of this type of attack in the CounterStrike community earlier this week. Someone setup a fake tournament website that asked the user to login with their Steam account. Then it launched what looked like a new browser window with the Steam login page, but was actually just a popover that had been elaborately styled, with window decorations and all.
- codelikeawolf 2y agoSo I think this API would just allow a bad actor to get your credentials in a way that adheres to accessibility guidelines. It doesn't enable them to do anything they couldn't do before programmatically.
- TrueDuality 2y agoI suspect this isn't going to get major usage. Making it a dedicated API makes these things easier to target by extensions and thus easier to block. There are legitimate usages but almost all of the ones I encounter are marketing call to actions and invasive support chat boxes which are both almost universally hated and would the target of those blocking action.
- Thorrez 2y agoWhat about cookie consents?
- lolinder 2y agoAlso universally hated and widely blocked.
- TrueDuality 2y agoVery much a anti-pattern. The entire concept of these is malicious compliance against the GDPR and not something that the GDPR requires.
- wizzwizz4 2y agoThe ePrivacy directive does require them, though. (Of course, not in the malicious-compliance form we see today.)
- seltzered_ 2y agoWhat about selecting an image to view?
- codelikeawolf 2y agoWhen I first read about this API a while back, I thought the same thing. But it's perfect for adding complex controls on top of inputs when you have limited real estate (e.g. clicking on an input with a font name and showing a font picker popover with a preview of the font). This is obviously possible today without this API, but I like that they added something semantic. I regularly have to wade through the ARIA docs to figure out which role/aria- attributes to use.
- staminade 2y agoI think the Popover API will be really transformative when CSS Anchor Positioning[1] arrives as well. Anchor positioning will let you position elements relative to others on the page. Combined with the Popover API it will let you implement things like custom tooltips and context menus in a declarative way and without any need for libraries like PopperJS [2] [1] https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning https://developer.chrome.com/blog/tether-elements-to-each-ot... [2] https://popper.js.org/docs/v2/ https://popper.js.org/docs/v2/
- jcutrell 2y agoHow is anchor different from relative?
- CuriouslyC 2y agoThey explain in the first couple paragraphs of the first link provided.
- paavohtl 2y agoposition: relative adds a fixed offset to the position the element would have been placed in normally, but position: anchor can be used to place an element near any arbitrary element, regardless of its place in the DOM hierarchy.
- staminade 2y agoThe article I linked goes into the details, but basically a relative approach constrains your markup: The positioned thing must be a child of the relatively positioned anchor or a wrapper element, and you often cannot sensibly position it without using JS to check the location of the anchor. E.g. a popover menu for a button must check if the button is close to an edge of the viewport and position the menu element appropriately. Anchor positioning will do this automatically. Also, if support for multiple anchors is included, then it opens up some very interesting capabilities to do things like draw arbitrary diagram connectors between elements: https://kizu.dev/anchor-positioning-experiments/ https://kizu.dev/anchor-positioning-experiments/
- delichon 2y agoThese are popovers: https://kagi.com/proxy/passover-popovers-6.jpg?c=gBnCtLe1QYlbnoklJQUpj88lnfSDhLzLxESyk8LQ2ElC_S1wFV2sMgn3pkgv2X-Lp2fEfNMJVMECHGzqd9FPob5Nnr0ViV4erpfH3NUF38hLlZZxq7uVDzqO-7I5GREF https://kagi.com/proxy/passover-popovers-6.jpg?c=gBnCtLe1QYl... No you can't have that word to mean something else, it's sacred. And because you tried you can't have any of my popovers either.
- logrot 2y agoNever heard of them. Any good? Something you make yourself or by ready? Eaten hot or cold?
- delichon 2y agoThey are quite delicious. Home made, eaten hot, with butter in our home. It's a Jewish Passover tradition that I find to be odd, because it is supposed to be part of an ascetic ritual in which we forego "leavened" bread and so instead eat matzo and popovers. But instead of being any kind of sacrifice it is a great treat, especially in a household that doesn't otherwise serve fresh baked bread. It's like telling a kid they've been naughty so they can't have the old cookies, they have to eat fresh baked cookies instead.
- mst 2y ago[ponders offering to swap for half his sandwich] [realises he made himself a bacon and sausage sandwich] ... never mind. [googles in shame] ... ooooh, it's a cousin of a Yorkshire Pudding, I knew it looked tasty!
- mquirion 2y agoGlad I'm not entirely alone in having this thought.
- aitchnyu 2y agoI once asked a question about popovers, one guy replied he googled what they were and got hungry.
- flak48 2y ago
- seltzered_ 2y agoThe popover API feature turned out to be super useful when writing a userscript for extracting data from a website recently. Allowed a nice way to float a list with content for users to copy.
- H1Supreme 2y ago> Popovers created using the Popover API are always non-modal. If you want to create a modal popover, a <dialog> element is the right way to go. Why? This is a legitimate use case for a popover. Especially if you're blurring the background while it's open. Why even offer that feature if a user's click can potentially trigger an action on some blurred out button. *edit: Apparently, you can combine the two: > You can turn a <dialog> element into a popover (<dialog popover> is perfectly valid) if you want to combine popover control with dialog semantics. Wouldn't <popover modal=true> make more sense here? They're clearly acknowledging a use case.
- eyelidlessness 2y agoProbably, among other things, because <dialog> existed much earlier.
- ativzzz 2y agoWas this worth developing? We already have infinite popover js/css libraries so this doesn't solve any unsolved problem. I suspect this will be like select, where you almost always want some functionality or styling that can't be done natively so you reach for a custom solution or use some existing library. Maybe if I start a new app this is OK as a stopgap until I need more functionality (which always happens), but in my existing app I'm just using the already existing popover library for consistency
- dmix 2y agoEvery single app having to import the same popper library, for over a decade, indicates there's sufficient need for native support. I've also been a proponent of a combobox becoming native (for ex: a select box of Countries where you can filter by typing) https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#:~:text=Combobox%20Pattern-,About%20This%20Pattern,grid%2C%20tree%2C%20or%20dialog https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#:~:text=C.... and ideally multi-select for ex a tag selector.
- cynicalsecurity 2y agoThat's the point. Why make the life easier for websites that display pop-ups. Pop-ups are pure evil.
- filleduchaos 2y agoWhat does that have to do with popovers, though?
- woodrowbarlow 2y agofor anyone who views third-party dependencies as a liability (license changes, leftpad drama, etc.), the ability to easily ditch them in favor of native implementations is a win.
- The_Colonel 2y agoYeah, just like e. g. flexbox doesn't solve any unsolved problems, you can do any layout with JavaScript. The problem with dropdown is that it has an immense variety of use cases which is difficult to generify. Still, I'm happy we have a basic native Select element, it's competely fine for 8/10 use cases, and okish for 1/10. OTOH, I believe that a popover is a much more generic feature and most you'd like to customize is styling.
- Alifatisk 2y agoDemo https://mdn.github.io/dom-examples/popover-api https://mdn.github.io/dom-examples/popover-api
- wruza 2y agoAnd in the nested popovers demo you can't go diagonally from Pizza to Ham, cause nobody in chrome or firefox bothered to implement a delay before a submenu disappears. Decades of UX research lost, almost as expected. https://mdn.github.io/dom-examples/popover-api/nested-popovers/ https://mdn.github.io/dom-examples/popover-api/nested-popove...
- nikkwong 2y agoDoesn’t seem to work on safari on iOS although it purportedly should according to the browser support table.
- shaan7 2y agoOk something is really wrong with my brain. I read this as "Poopover API", and it keeps on happening throughout the comments -.-
- nick__m 2y agoyou are not alone!
- suyash 2y agoI quite like these two examples: 1. Pop up menu like those on Windows/Ubuntu : https://mdn.github.io/dom-examples/popover-api/nested-popovers/ https://mdn.github.io/dom-examples/popover-api/nested-popove... 2. Android style toast notifications: https://mdn.github.io/dom-examples/popover-api/toast-popovers/ https://mdn.github.io/dom-examples/popover-api/toast-popover...
- c-smile 2y agoThis seems to be modelled after Sciter's popups that existed 10 or so years. anchorElement.popup(elementToPopup, options) - https://docs.sciter.com/docs/DOM/Element/#popup https://docs.sciter.com/docs/DOM/Element/#popup In Sciter popup element is always associated with its anchor element and appears relative to it. CSS was expanded to support popups: :popup state flag/selector is "on" the popup element and :owns-popup is "on" on popup anchor element when the popup is shown. Also several CSS properties: popup-position, popup-anchor-reference-point, popup-reference-point, popup-animation. Sciter has built-in JSX and so element.popup() accepts JSX that creates popup DOM element on demand, for example this button.onclick = function() { button.popup(<select type="list"> <option>A</option> <option>B</option> <option>C</option> </select>) } will popup selectable list as dropdown popup.
- ulrischa 2y agoAlready here submitted: https://news.ycombinator.com/item?id=40043029 https://news.ycombinator.com/item?id=40043029
- burnished 2y agoGod damn I love their docs
- paulddraper 2y agoAh, prompt()/alert()
- jrockway 2y agoIt's a shame that browser developers have to implement enough of this API to entice people to use it, only for users to install extensions that simply disable it ;)
- kitallis 2y agoThis is great. Here's a custom implementation with Stimulus using Popper – https://github.com/tramlinehq/tramline/blob/main/app/javascript/controllers/popup_controller.js https://github.com/tramlinehq/tramline/blob/main/app/javascr... And here's one for <dialog> – https://github.com/tramlinehq/tramline/blob/main/app/javascript/controllers/dialog_controller.js https://github.com/tramlinehq/tramline/blob/main/app/javascr...
- tijssss 2y agoCSS only tooltips in bootstrap, see https://noojs.pages.dev/components/tooltips.html https://noojs.pages.dev/components/tooltips.html