Viewport-placement pseudo-element

Currently there is lots of Javascript around that handles tooltips/popovers, for example popper (https://popper.js.org/).

A lot of what those libraries do is compute placement based on a position of an element relative to the current viewport.

The idea is to avoid those computations in JS, by having a pseudo-element that gets triggered by the position of an element relative to the viewport.

For example:

a:viewport-position(top below 50%) .popup {
   bottom: 100%;
}

This would allow creating pretty complex popover positioning without Javascript at all.

Does https://drafts.csswg.org/scroll-animations-1/ solve this problem?

I need to tinker with it. Might solve a similar problem.

So I’ve played with scroll-based animations. It would be possible to create a similar effect with element-based offset, but it feels like a long way to go, and maybe not straightforward for something that is not directly related to animation…

That seems actually great. I think that using this approach together with dialog element would allow for great popover elements that are actually on top of everything without use of complicated js.