Положение всплывающей подсказки относительно другого div в JQuery

Question

Вот моя разметка всплывающих подсказок и CSS:

<div class="tooltip">Click here to like it</div>

.tooltip {
    position: absolute;
    display: none;
    background: url('images/tooltip.gif') no-repeat;
    width: 100%;
    height: 40px;
    font-size: 0.8em;
    line-height: 40px;
    padding: 0px 0px 0px 8px;
}

Теперь у меня на странице есть div с именем #button_container. Я хотел бы разместить этот .tooltip div 150px справа от этого div через JQuery. Я понимаю, что мне нужно установить атрибуты всплывающих подсказок top и left, но не знаю, как.

В идеале атрибут top всплывающей подсказки должен совпадать с #button_container (хотя #button_container не позиционируется абсолютно) и на 150 меньше #button_container атрибута left.

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

Answer 1

Во-первых, совет: не катайтесь на этом.Есть много отличных плагинов для подсказок jQuery.Просто используйте один из них.

Кроме этого, если вы хотите пойти по этому пути, есть несколько способов сделать это.Маршрут позиционирования CSS должен использовать относительное + абсолютное позиционирование:

#button_container { position: relative; }
div.tooltip { position: absolute; top: 20px; right: 20px; }

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

Более распространенное решение - использовать что-то вроде:

$("#button_container").hover(function(evt) {
  $("div.tooltip").css({top: evt.pageY + 10, left: evt.pageX + 10}).fadeIn();
}, function() {
  $("div.tooltip").fadeOut();
});

В основном вы перемещаете подсказку относительнонаведите курсор мыши на соответствующий регион.