I was reading through the CSS Anchored Position spec and I just could not figure out how to make a tooltip that points towards the anchor. To me that was kind of an obvious requirement as this is a really common pattern for tooltips.
This is what I ended up with:
https://codepen.io/NielsLeenheer/pen/jEWyQxa
So this is either very clever, or I am overlooking something very obvious. Which is it? Is there an easier way to do this?
(Oh... and it crashes Safari... so... yeah)
@html5test @Una @mia Oh, that’s quite a nice solution to conditionally positioning the tether. Clever!
In Chrome you’ll soon be able to use a new anchor() style query that allows you to query which position-try-fallback is currently being used, and style the (one) tether based on that.
@html5test Yes!
```
#anchored {
position-try-options: flip-block;
container-type: anchored;
}
@container anchored(fallback: flip-block) {
#anchored > .arrow {
--arrow-rotation: 180deg;
}
}
```
Expected to ship to stable next month with Chrome 143. Now still behind a flag.
Demo by @Una: https://codepen.io/una/pen/ZYbzrLg
Niels Leenheer
Bramus