在JQuery中相对于另一个div定位工具提示

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通过JQuery 将这个div 150px 放在该div的右边.我知道我需要设置这个工具提示top和left属性,但不知道如何.

Idealy工具提示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();
});

基本上,您在相关区域上方相对于鼠标移动工具提示.