How to automatically move a block to the visible part of the browser window?

Question

css

I have a block in which, when hovering over squares, text appears under this square.

I need to make it so that when hovering over the extreme squares (which to the left and right), the block with the text is completely visible. And so that it works on an adaptive, for example, on 768.

Of course, I can set classes for these extreme elements and shift the text manually, but the fact is that on an adaptive, the extreme blocks will be different. I want to do it without crutches, but I don’t understand how. Maybe there is a way to detect that a block is outside the window area and move it automatically? Thanks for the answer.

https://jsfiddle.net/IvanGrishov/18rwemg3/16/

Answer 1

At the moment, tasks of this kind are solved using JavaScript and mathematics:
Calculate block sizes, look at the size of the okra, look at the position of the block. If it somehow falls out of the visible area, move the block to the side. There are also ready-made libraries for this. For example popper.js