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未定位）且比#button_container {{1}小150 } attribute。

我真的不知道从哪里开始，所以任何帮助都会非常感激。感谢。

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();
});

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

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

1 个答案: