这是我的工具提示标记和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的右边.我知道我需要设置这个工具提示的顶部和左侧属性,但不知道如何.
理想情况下,工具提示顶部属性应与#button_container相同(尽管#button_container不是绝对定位的),并且比#button_container的左属性少150.
我真的不知道从哪里开始,所以任何帮助都将非常感激.谢谢.
解决方法
首先是一条建议：不要自己动手.有许多优秀的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();
});
基本上,您在相关区域上方相对于鼠标移动工具提示.
