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

Question

[Fierfoxik]

Пытаюсь сделать адаптивное tooltip окно.

Но возник вопрос, если tooltip показывается справа от элемента, как рассчитать тот момент когда он не будет влезать с правой стороны от элемента в контейнере?

И как позиционировать tooltip по вертикали что бы он оказался по середине элемента?

codepen

var showingTooltip;

    document.onmouseover = function(e) {
      var target = e.target;

      var tooltip = target.getAttribute('data-tooltip');
      if (!tooltip) return;

      var tooltipElem = document.createElement('div');
      tooltipElem.className = 'tooltip';
      tooltipElem.innerHTML = tooltip;
      document.body.appendChild(tooltipElem);

      var coords = target.getBoundingClientRect();

      var left = coords.left + target.offsetWidth;
      if (left < 0) left = 0;

      var top = coords.top - tooltipElem.offsetHeight - 5;
      if (top < 0) { 
        top = coords.top + target.offsetHeight + 5;
      }

      tooltipElem.style.left = left + 'px';
      tooltipElem.style.top = top + 'px';

      showingTooltip = tooltipElem;
    };

    document.onmouseout = function(e) {

      if (showingTooltip) {
        document.body.removeChild(showingTooltip);
        showingTooltip = null;
      }

    };

Comments

[Ankhena]

Центрирование: https://learn.javascript.ru/css-center

Про тултипы есть готовые скрипты, ссылку куда-то потеряла, но оно гуглится или ищется по тостеру.

[Fierfoxik]

Ankhena, абсолютный блок относительно элемента, здесь только js , только хардкор
из готовых нашел только до кучи плагинов и 2 примера, один из которых взял за основу

[Александр Гонтарев]

по факту вы просите написать код, а не ответить на вопрос, а лучше конечно взять готовый popper.js, его использует тот же bootstrap

[Fierfoxik]

Александр Гонтарев, не написать готовый код а подсказать формулу по которой идет расчет позиции, если взглянуть на кодепен то все уже почти готово, и плагины мне не подойдут, у меня более развернутая структура нежели одна строчка текста, а передавать туда по 4 блока с данными в виде строки вообще не гуд. Тем более все это делается в рамках обучения.

[Ankhena]

Fierfoxik,
можно сложить абсолютный блок внутрь блока relative
хотите хардкора, считайте на JS

[Fierfoxik]

Ankhena, если ограничивать позицию relative , то логика данного когда совершенно меняется, ведь на данном этапе идет расчет по позиции элемента в окне

[Ankhena]

Fierfoxik, и что с того?
При таком раскладе с вертикальной серединой проблем нет.
На JS только проверка влезает справа или нет. Если влезает, то left 100%, не влезает right 100%.

[Fierfoxik]

Ankhena, в этом то и загвоздка моя, я не знаю как определить момент когда элемент не влазит за пределы окна или родителя

[Ankhena]

Fierfoxik, отлично!
На примере "короткая кнопка".
Вы можете:
- узнать ширину окна
- узнать левый край кнопки
- узнать ширину кнопки
- вычесть из ширины окна расстояние до кнопки и ширину кнопки
- сравнить получившееся с шириной тултипа
?