Self Positioning modal
I wanted advice on how should I go about this , should just simply calculate the space anytime an item is hovered with JS and add classes or is there any better CSS only way or any simpler approach
4 Replies
Yea, get the viewport offset of the hovered item. If that is greater then the popup height, place above, otherwise below.
Can not think of a css-only way
after i made the post i found this vid about the new anchor thingy , https://www.youtube.com/watch?v=B4Y9Ed4lLAI&t=657s , maybe i can translate this to trigger when hovered or something
Web Dev Simplified
YouTube
CSS Anchor Is The Best New CSS Feature Since Flexbox
I cannot believe this is a feature coming to HTML/CSS. Anchoring elements used to be only something you could do with hundreds of lines of complex JavaScript code, but now it can be done with a single line of CSS. I am incredibly excited for this feature to be production ready as it has the potential to massively change web development.
📚 Mate...
css anchor is still experimental and behind flags. not usable for production
I can’t wait for anchor to be ready to use!!!! It’s gonna be an awesome property . But browser support is not there yet . Damn Safari!!!