Viewport-placement pseudo-element

CSS
#1

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.

3 Likes
#2

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

#3

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

#4

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…

#5

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.

1 Like