[staminade]

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-each-ot... [2] https://popper.js.org/docs/v2/

[unakrav]

I just shipped a new article all about how to use the CSS anchoring API, which is landing in Chromium next week! https://developer.chrome.com/blog/anchor-positioning-api

[mardifoufs]

I love articles with actual running examples, thanks! Now I'm wondering how quickly this will get adopted, it looks very cool!

[oddgoo]

Fantastically illustrated and interactive article! I wonder if/how Tailwind will grow to adapt this, as I'm pretty happy with their abstractions now.

[hkdobrev]

The source link at the top of the article leads to a 404.

[threatofrain]

Browser support.

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

[pupppet]

Oh the number of hours CSS anchor positioning would’ve saved me over the years.

[ndom91]

This is the critical missing piece. Tried playing with and ship something with the new popover API last week, but missing positioning support in all browsers is really holding this back from more use-cases.

Looks like the last browser (FF) has already shipped anchor positioning in beta, so it won't be long!

[Fatnino]

Aren't there only 2 browsers? There is Firefox and there are all the Chrome derivatives.

[hanniabu]

I'm amazed that in 2024 html/css doesn't have a tooltip attribute like there is for title

[jimbobthrowawy]

Does the "title" attribute not work? I tried adding one to the <span> containing your post and it worked. I assume that's non-standard.

[jcutrell]

How is anchor different from relative?

[staminade]

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/

[CuriouslyC]

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

[paavohtl]

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.