用于显示工具提示框的样式

Question

当鼠标在.show_tooltip上输入时，不知道为什么工具提示框（类li a）已经离开了，我希望显示每个工具提示框顶部与鼠标输入相同的链接以及宽度和高度是或多或少它是相同的风格。（我希望链接放在右边） DEMO

我想要这个例子（对于how）：我该怎么做？

CSS：

.show_tooltip{
    background-color: #E5F4FE;
    display: none;
    padding: 5px 10px;
    border: #5A5959 1px solid;
    position: absolute;
    z-index: 9999;
    color: #0C0C0C;
    /*margin: 0 0 0 0;
    top: 0;
    bottom: 0;*/
}

HTML：

<ul>
    <li>    
    <div class="show_tooltip">
        put returns between paragraphs
    </div>
        <a href="#">about</a>
    </li>
    <br>
    <li>    
    <div class="show_tooltip">
        for linebreak add 2 spaces at end
    </div>
        <a href="#">how</a>
    </li>
</ul>

jQuery的：

$("li a").mouseenter(function(){
     $(this).prev().fadeIn();
}).mousemove(function(e) {
            $('.tooltip').css('bottom', e.pageY - 10);
            $('.tooltip').css('right', e.pageX + 10);
        }).mouseout(function(){
     $(this).prev().fadeOut();
})

Answer 1

试试这个：http://jsfiddle.net/keepyourweb/ecR2S/2/