Tooltip (improved)

index.html

<div data-tooltip="Здесь домашний интерьер" id="house">
  <div data-tooltip="Здесь крыша" id="roof"></div>

  <p>Жили-были на свете три поросенка. Три брата. Все одинакового роста, кругленькие, розовые, с одинаковыми веселыми
    хвостиками.</p>

  <p data-tooltip="Имена поросят">Даже имена у них были похожи. Звали поросят: Ниф-Ниф, Нуф-Нуф и Наф-Наф. Все лето
    они кувыркались в зеленой
    траве, грелись на солнышке, нежились в лужах.</p>

  <p>Но вот наступила осень. Солнце уже не так сильно припекало, серые облака тянулись над пожелтевшим лесом.</p>

  <p>- Пора нам подумать о зиме, - сказал как-то Наф-Наф. <a href="https://ru.wikipedia.org/wiki/%D0%A2%D1%80%D0%B8_%D0%BF%D0%BE%D1%80%D0%BE%D1%81%D1%91%D0%BD%D0%BA%D0%B0" data-tooltip="Читать далее…">Наведи курсор на меня</a></p>

</div>

script.js

let tooltip;

document.onmouseover = (event) => {
  let anchorElem = event.target.closest("[data-tooltip]");
  if (!anchorElem) return;
  tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
};

document.onmouseout = (event) => {
  if (tooltip) {
    tooltip.remove();
    tooltip = null;
  }
};

function showTooltip(anchorElem, html) {
  let tooltipElem = document.createElement("div");
  tooltipElem.className = "tooltip";
  tooltipElem.innerHTML = html;
  document.body.append(tooltipElem);
  // позиционирование
  let coords = anchorElem.getBoundingClientRect();
  let left =
    coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2;
  if (left < 0) left = 0;
  let top = coords.top - tooltipElem.offsetHeight - 5;
  if (top < 0) {
    top = coords.bottom + 5;
  }

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

  return tooltipElem;
}

style.css

body {
  height: 2000px;
  /* подсказка должна работать и после прокрутки страницы */
}

.tooltip {
  position: fixed;
  z-index: 100;

  padding: 10px 20px;

  border: 1px solid #b3c9ce;
  border-radius: 4px;
  text-align: center;
  font: italic 14px/1.3 sans-serif;
  color: #333;
  background: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}

#house {
  margin-top: 50px;
  width: 400px;
  border: 1px solid brown;
}

#roof {
  width: 0;
  height: 0;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-bottom: 20px solid brown;
  margin-top: -20px;
}

p {
  text-align: justify;
  margin: 10px 3px;
}

tooltip-improved.markdown

Tooltip (improved)

A Pen by Artem on CodePen.

License.

tooltip.markdown

Tooltip

A Pen by Artem on CodePen.

License.