CSS by T. Afif Oct 13

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

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 threadJon
@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 :(
Oct 14 at 3:32pmIvory for iOS
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.