Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Popover API

developer.mozilla.org

Post reply on HN
Print view View original

51–60 of 166 posts

Re: Popover API

#51

Post by threatofrain »

staminade wrote: post #43

I 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-eac…

Browser support.

https://caniuse.com/css-anchor-positioning

Re: Popover API

#52

Post by clementmas »

eknkc wrote: post #11

There is also ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di... ) if you want modal dialogs.

As someone pointed out, it's indeed harder to animate but it's fully accessible, supports escape key to close, has a built-in backdrop and has built-in focus trap. Safari took a while to support it but now it's available everywhere. I think it's better than using a tag.

Re: Popover API

#54

Post by CuriouslyC »

jcutrell wrote: post #49
staminade wrote: post #43

I 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-eac…

How is anchor different from relative?

They explain in the first couple paragraphs of the first link provided.

Re: Popover API

#55

Post by clementmas »

bityard wrote: post #25

As 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?

I use 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.

Re: Popover API

#56

Post by logrot »

delichon wrote: post #53

These are popovers: 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.

Never heard of them. Any good? Something you make yourself or by ready? Eaten hot or cold?

Re: Popover API

#57

Post by afavour »

globalise83 wrote: post #39

Another 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.

Two 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.

Re: Popover API

#58

Post by paavohtl »

jcutrell wrote: post #49
staminade wrote: post #43

I 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-eac…

How is anchor different from relative?

position: 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.

Re: Popover API

#59

Post by mst »

delichon wrote: post #53

These are popovers: 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.

[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!

Re: Popover API

#60

Post by staminade »

jcutrell wrote: post #49
staminade wrote: post #43

I 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-eac…

How is anchor different from relative?

The 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/

Post reply on HN