Anchor positioning is part of Interop 2025. Firefox committed to shipping support for it this year: https://wpt.fyi/interop-2025
After that, it should take about 2.5 years for the feature to become Baseline widely available, and depending on your audience[0], you might be able to use it even sooner.
There are already a few sites that don't work properly in Firefox, people started testing only for chrome because its market share is so big.
Really unfortunate because it lets Google get away with anything they want, they are the new standard. But then again, I'm reminded of how Mozilla has pissed away all the users goodwill, and it's not a surprise.
In my experience LLMs are surprisingly bad at CSS beyond a very basic level. They work fine if you need to change the color of a button, but when it comes to actual styling work, even intermediate stuff like position:absolute or CSS grid, Copilot or even CC default to outputting correct-looking gibberish really quickly.
That's telling about CSS design. Folks here on HN are talking about how they purposely ask LLMs about APIs that don't exist, and they hallucinate with a better and more intuitive design that they would come up with on their own.
I don't know the best solution for the problem, but CSS is a very convoluted one.
I need a tooltip, with a pointer; but it seems that the current state of the spec does not allow for pointers; and most explainers studiously avoid this use case, as if this isn't a lion's share of what people do with anchored floating boxes.
Tooltips are normally visible on hover, so the pointer is your cursor. I've never added an additional arrow pointing to the element, nor had any designers ask me to do so. So I'd disagree that such a design is the "lion's share", but am curious what types of apps you create where you do find it to be so?
Someone in a comment below posted a link to Adobe Spectrum design system [0]. You will find similarly shaped tooltips in Shoelace [1], or shadcn [2]. The Popper library has it [3]. Github's design system has it (they call it popover) [4]. It's an extremely common design pattern.
They are using a stylized floating DIV (or something) not the built-in thing from the title attribute. Lots of design teams seem to want this, for consistency.
> Think a common approach is to just display a triangular svg beneath the tooltip
One killer feature of CSS anchor positioning is that it allows you to declaratively define fallback positions if the floating element does not fit into the preferred position. For example, you prefer your tooltips to appear below the anchor; but if the anchor happens to be at the bottom of the screen, there is no space below it, and so the floating element can flip to the top.
After the flip, the triangular svg will be pointing in the wrong direction.
I'm unsure what you mean by "pointer" - normally that just refers to the user's mouse cursor on-screen...
...do you mean you want a rich-HTML tooltip that is auto-positioned to ensure it's fully visible w.r.t. the browser's viewport but you also want the tooltip (or UI in general) to include an arrow shape that stays fixed on-target even if might be occluded by the browser?
Would be cooler if the whole system were more flexible: you simply define 2 anchor points (one on the target, another on the source, so center bottom would be bottom width 50% and top width 50%) instead of being limited to the 9 predefined areas
`position-anchor` is a high-level simple way of doing it, and it comes with the restrictions you mention. However, the `anchor()` function, which is also mentioned in the article, gives you the kind of flexibility you want.
I’m surprised it’s not in Firefox. I don’t remember the last time I ran into something in Safari and Chrome but not FF.
I was reading the article and thinking it would be a great thing to adopt for some code we recently wrote, but we have to support Firefox. And since we already have an existing solution that works, no point cleaning it up with this until Firefox adopts it.
I occasionally look into what CSS is being transcoded for the projects I work on, and it’s normally Firefox ESR that needs the most help. If you eliminate that from your browserlists configuration, your source and deployed CSS become a lot more closely aligned. For instance, it was only a year ago that Firefox ESR got CSS nesting.
Readit News
After that, it should take about 2.5 years for the feature to become Baseline widely available, and depending on your audience[0], you might be able to use it even sooner.
[0]: https://web.dev/blog/whats-my-baseline
https://bugzilla.mozilla.org/show_bug.cgi?id=css-anchor-posi...
Really unfortunate because it lets Google get away with anything they want, they are the new standard. But then again, I'm reminded of how Mozilla has pissed away all the users goodwill, and it's not a surprise.
Doesn't this count? Been there for several years.
https://github.com/oddbird/css-anchor-positioning
[0] https://anchoreum.com/
I don't know the best solution for the problem, but CSS is a very convoluted one.
[0] - https://spectrum.adobe.com/page/tooltip/
[1] - https://shoelace.style/components/tooltip
[2] - https://ui.shadcn.com/docs/components/tooltip
[3] - https://popper.js.org/docs/v2/modifiers/arrow/
[4] - https://primer.style/product/components/popover/guidelines/
https://react-spectrum.adobe.com/react-aria/Tooltip.html#exa...
One killer feature of CSS anchor positioning is that it allows you to declaratively define fallback positions if the floating element does not fit into the preferred position. For example, you prefer your tooltips to appear below the anchor; but if the anchor happens to be at the bottom of the screen, there is no space below it, and so the floating element can flip to the top.
After the flip, the triangular svg will be pointing in the wrong direction.
...do you mean you want a rich-HTML tooltip that is auto-positioned to ensure it's fully visible w.r.t. the browser's viewport but you also want the tooltip (or UI in general) to include an arrow shape that stays fixed on-target even if might be occluded by the browser?
An arrowhead pointing at the anchor element.
Example: https://en.wikipedia.org/wiki/Tooltip#/media/File:Mobile_URL...
UPD: In spec speak, these are called tethers. The anchoring indicators
https://fantasai.inkedblade.net/style/specs/css-anchor-explo...
https://developer.mozilla.org/en-US/docs/Web/CSS/anchor
I was reading the article and thinking it would be a great thing to adopt for some code we recently wrote, but we have to support Firefox. And since we already have an existing solution that works, no point cleaning it up with this until Firefox adopts it.
Still, looks like a very nice feature.
It’s not especially uncommon. For instance payment requests, web share, and remote playback are all implemented by Blink and WebKit but not Gecko.
https://developer.mozilla.org/en-US/docs/Web/API/Payment_Req...
https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_A...
https://developer.mozilla.org/en-US/docs/Web/API/RemotePlayb...
I occasionally look into what CSS is being transcoded for the projects I work on, and it’s normally Firefox ESR that needs the most help. If you eliminate that from your browserlists configuration, your source and deployed CSS become a lot more closely aligned. For instance, it was only a year ago that Firefox ESR got CSS nesting.
IIRC Firefox lagged quite a lot on Color Profiles and :has
Background data sync/download with continuation