如何集中我的工具提示？

Question

我试图将我的工具提示泡沫中心但没有成功:(我猜这个解决方案非常简单，但我无法实现。有人可以帮助我吗？THX !! Fiddle here
我的代码：

$(document).ready(function(){
$(".menu .a").hover(function() {
var checkWidth = $(this).outerWidth() - $(this).outerWidth()/2;
    $(this).next("em").css({left:checkWidth}).animate({opacity: "show"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide"}, "fast");
    });
});

Answer 1

This Fiddle应该适合你。您必须考虑工具提示本身的宽度。

var checkWidth = $(this).outerWidth() - $(this).outerWidth()/2 - $(this).next("em").outerWidth()/2;

Answer 2

这个怎么样：

.menu li em {
white-space:nowrap;
background-color:red;
position: absolute;
margin-top:-100px;
margin-left: -50px; /* I added just this line */
text-align: center;
padding: 20px;
font:12px helvetica, arial, sans-serif;
display:none;
}