CSS by T. Afif 

Do you want to see more cool stuff using modern CSS? This time, the tooltip will consider all four positions, and the tail will always point to the anchor. 👀

https://css-tip.com/tooltip-anchor-2/

Still 100% CSS magic! 🪄

#CSS #HTML

Oct 13 at 9:54amWeb
Show threadCSS by T. Afif Oct 14

It's also easy to debug using Dev Tools

It shows you which fallback position is used by crossing out all the others. When all of them are crossed out, the position defined on the element is the one used.

#CSS #HTML

Show threadJonOct 14
@css this is so cool! The codepen I found to be a bit funky with the top right corner when using Chrome Canary it was possible to just push the tooltip off screen without it adjusting, and of course, it seems to not work in other browser yet :(
Show threadCSS by T. Afif Oct 14

@scrwd that's not really funky but by design. When you are close to the corners there is no available position in the fallback list that keeps the tooltip visible so it stay as it is.

I can update the code to consider placing the tooltip at the corners as well (and have 8 positions in total) but it would be tricky for the tail. Maybe for a future demo.

Show threadkaiserkiwi Oct 14
@css Interesting music choice. 😁
Show threadCSS by T. Afif Oct 14
@kaiserkiwi it was not intentional, I forgot to mute the sound 😅
Show threadkaiserkiwi Oct 14
@css Funny how it works so good for the video. The snippet fits and the content is pretty on point. 😁
Show threadAndyOct 13
@css very very cool feature, unfortunately it is not supported by #Firefox
Show threadspartanatreyuOct 14

@Blacklight @css Interop 2025 looks promising.

Current Firefox passes 14.7% of anchor positioning tests, but their nightly builds currently pass 66.8% of tests.

Given Firefox's release cycle, I can see it passing > 95% within 6 months, so any projects that will take at least 6 months could probably start using it now.