Всплывающее окно

Частенько хочется чтобы при наведении мыши на элемент рядом отображался блок с подробной информацией или элементами интерфейса позволяющими что-то поменять. Никаких велосипедов тут нет, просто небольшая памятка в помощь.

Итак, у нас есть елемент node при наведении на который вплотную справа должен отображаться элемент popupNode.

node.appendChild(popupNode);
popupNode.style.display = "none";
popupNode.style.position = "absolute";

node.addEventListener(
    "mouseover",
    function() {
        popupNode.style.display = "block";
    },
    false
);

node.addEventListener(
    "mouseout",
    function() {
        popupNode.style.display = "none";
    },
    false
);

Всплывающее окно появляется и исчезает, но только находится оно под элементом, и хотелось бы эту позицию поменять. Скажем, сместить окно вправо и вверх.

node.appendChild(popupNode);
popupNode.style.display = "none";
popupNode.style.position = "absolute";
popupNode.style.left = "20pt";
popupNode.style.top = "-20pt";

node.addEventListener(
    "mouseover",
    function() {
        popupNode.style.display = "block";
    },
    false
);

node.addEventListener(
    "mouseout",
    function() {
        popupNode.style.display = "none";
    },
    false
);

И мы видим свое окно непонятно где. Почему? Потому что смещение вычислялось не относительно node а относительно первого родителя со свойством position не равным static. Можно пойти длинным путем и вычислить точные координаты node, а можно просто добавить еще один элемент.

var tempNode = document.createElement("div");
tempNode.style.position = "absolute";
tempNode.appendChild(popupNode);

node.appendChild(tempNode);
popupNode.style.display = "none";
popupNode.style.position = "absolute";
popupNode.style.left = "20pt";
popupNode.style.top = "-20pt";

node.addEventListener(
    "mouseover",
    function() {
        popupNode.style.display = "block";
    },
    false
);

node.addEventListener(
    "mouseout",
    function() {
        popupNode.style.display = "none";
    },
    false
);