Boundary for position: absolute

I’m trying to add hover boxes to elements. They contain some content, have a fixed width, but not height. The height depends on the content.

Now the problem is, that if I try to position the top-left corner right from the element I’m hovering, and the element is at the bottom of the screen, the hover box goes out of the screen bounds. I need some way to check if the bottom of the element is below the screen, then I want to position the bottom-left corner at the bottom of the hovered element. Is that possible using only CSS? Or do I need to use JavaScript for that calculation?