jquery - 相对于 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;
}

现在，我的页面上有一个名为 #button_container 的 div。我想通过 JQuery 将此 .tooltip div 150px 放在该 div 的右侧。我知道我需要设置此工具提示 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();
});

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