jquery - 使用 jQuery 计算文本像素宽度

我想向我的菜单添加一个简单的工具提示。如何计算我的文本中有多少像素工具提示有吗？

HTML:

<nav>
    <ul>
        <li>
            <a href="#" title="Item 1 text">Item 1</a>
        </li>
        <li>
            <a href="#" title="Item 2  longer text" >Item 2</a>
        </li>
        <li>
            <a href="#" title="Item 3 text text text">Item 3</a>
        </li>
    </ul>
</nav>

CSS:

nav{
    position: fixed;
    left:0;
    right:0;
    bottom:0;
    height:30px;
    background: grey;
}
ul{
    width: 300px;
    margin:0 auto;
}
li{
    float:left;
    position:relative;
}
span{
    position:absolute;
    left: 50%;
    bottom: 30px;
    background:black;
    border: solid 1px grey;
    border-bottom:none;
    display:none;
    color:white;
}
li:hover span{
    display:block;
}
a{
    display:block;
    text-decoration:none;
    color: white;
    line-height: 30px;
    padding: 0 10px;

}

jQuery:

$(document).ready(function(){
    $('nav li').each(function(){
        $(this).append('<span>'+$(this).find('a').attr('title')+'</span>');
    });
    $('nav li span').each(function(){
        // var textwidth = ???? 
        // $('nav li span').css("left",-textwidth/2);
        // $('nav li span').css("width",textwidth);
    });
});

演示:
http://jsfiddle.net/vxUTZ/1/

最佳答案