Подсказка, следующая за курсором

Три события имеют отношение к подсказке:

1. При mouseover — показать.
2. При mousemove — показать на новом месте.
3. При mouseout — спрятать.

…Но при заходе на элемент происходят сразу оба события: mouseover и mousemove на нём же. Зачем вызывать код для показа два раза? Можно оставить его только в mousemove.

Стиль элемента подсказки:

.tooltip {
  position:absolute;
  left: -9999px; /* изначально спрятана за пределы экрана */
  z-index:100; /* подсказка должна перекрывать другие элементы */
  ...
}

Скелет кода:

function Tooltip(elem, text) {

  var offsetFromCursor = 10; // отступ от курсора 10px
  var tooltipElem; // тут будет элемент-подсказка

  elem.onmouseout = function() {
    hide();                   // спрятать подсказку
  };

  elem.onmousemove = function(e) {
    e = fixEvent(e);
    show(e.pageX, e.pageY);   // показать рядом с курсором
  };

  function getTooltipElem() { // создать элемент-подсказку
    if (!tooltipElem) {
      tooltipElem = document.createElement('div');
      tooltipElem.className = 'tooltip'; // CSS подсказки
      tooltipElem.innerHTML = text;
    }
    return tooltipElem;
  }

  function hide() {
    document.body.removeChild(getTooltipElem());
  };

  function show(pageX, pageY) {
    показать getTooltipElem() для координат курсора pageX/pageY
  }
}

Для показа на нужном месте — как правило, подойдут простые вычисления. Функция show ниже сдвигает элемент на offsetFromCursor относительно переданных её координат курсора:

function show(pageX, pageY) {
  var tooltipElem = getTooltipElem();

  var newLeft = pageX + offsetFromCursor;
  var newTop = pageY + offsetFromCursor;

  tooltipElem.left = newLeft + 'px';
  tooltipElem.top = newTop + 'px';
}

Основной сложный момент здесь — определить, когда подсказка вылезает за правую/нижнюю границы окна. Для этого нужно эти границы вычислить:

var scrollY = window.pageYOffset || document.documentElement.scrollTop;
var winBottom = scrollY + document.documentElement.clientHeight;

var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
var winRight  = scrollX + document.documentElement.clientWidth;

Соответствующие свойства, использованные для вычисления, описаны в статье Размеры и прокрутка элементов.

Проверим, не вылезет ли подсказка за границы, и если это так — перенесём ее:

if (newLeft + tooltipElem.offsetWidth > winRight) {
  // правая граница подсказки вылезает за экран
  newLeft -= tooltipElem.offsetWidth;
  newLeft -= offsetFromCursor+2; // (*)
}

if (newTop + tooltipElem.offsetHeight > winBottom) {
  // нижняя граница подсказки вылезает за экран
  newTop -= tooltipElem.offsetHeight;
  newTop -= offsetFromCursor+2;  // (**)
}

Здесь есть еще две тонкости.

1. Для того, чтобы можно было получить offsetHeight/offsetWidth, подсказка должна быть скрыта при помощи visibility:hidden или left/top за пределами экрана, но не display:none.
2. В строках (*) и (**) подсказку сдвигаем немного левее/выше курсора (на 2 пикселя).

   Главное чтобы подсказка не оказалась под курсором. Если такое произойдет, то подсказка перекроет элемент, и в результате события mousemove станут происходить уже на подсказке, а не на элементе, и их обработка сломается.

Полное решение: tutorial/browser/events/tooltip-moving/index.html.