<script src="../scripts/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.tooltip").mouseover(function(e) {
var tooltip = "<div id='tooltip'>" + this.title + "</div>";
$("body").append(tooltip);
$("#tooltip")
.css({
"top": e.pageY + "px",
"left": e.pageX + "px"
}).show("fast");
}).mouseout(function() {
$("#tooltip").remove();
});
})
</script>
<p><a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a></p>
鼠标移动到a标签上,自定义的提示框却出现在下面,而不是鼠标触碰a标签的那个位置,我弹出鼠标的X,Y坐标都是正常的。
如图:
为CSS添加position:absolute属性