Как автоматически переместить блок в видимую часть окна браузера?

Question

[Иван Гришов]

У меня есть блок, в котором при наведении на квадраты появляется текст под этим квадратом.

Мне нужно сделать так, чтобы при наведении на крайние квадраты (слева и справа которые) блок с текстом был полностью виден. И чтобы работало на адаптиве, например на 768.

Я, конечно, могу задать классы этим крайним элементам и сместить текст вручную, но дело в том, что на адаптиве, крайние блоки будут уже другие. Хочется сделать без костылей, но не понимаю как. Может есть способ, чтобы определять, что блок находится вне зоны окна и перемещать его автоматически? Спасибо за ответ.

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

Comments

[Сергей delphinpro]

только js

Answer 1

[Alex]

В данный момент задачи такого рода решаются с помощью JavaScript и математики:
Вычисляете размеры блока, смотрите размеры окра, смотрите положение блока. Если он как-либо вываливается за пределы видимой области -- сместить блок в сторону. Есть и готовые библиотеки для этого. Например popper.js

Comments

[Иван Гришов]

Спасибо, изучу popper.js

[Иван Гришов]

Подключил tippy.js, он на основе popper.js, только с большим выбором разных анимаций, четко вышло.