всплывающая подсказка

by Aleksandr Tomashov

HTML

<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>

<button data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
<button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>

<p>Прокрутите страницу, чтобы ссылки были вверху и проверьте, правильно ли показываются подсказки.</p>

CSS

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

  .tooltip {
    position: fixed;
    padding: 10px 20px;
    /* красивости... */
    border: 1px solid #b3c9ce;
    border-radius: 4px;
    text-align: center;
    font: italic 14px/1.3 arial, sans-serif;
    color: #333;
    background: #fff;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
  }

JavaScript

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 - tooltipElem.offsetWidth) / 2;
  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;
  }

};