显示工具提示框的样式答案

【问题标题】：style for displaying tooltip box显示工具提示框的样式
【发布时间】：2011-10-01 21:08:08
【问题描述】：

不知道为什么当鼠标进入li a 时会留下工具提示框（类.show_tooltip），我想显示每个工具提示框顶部与鼠标输入相同的链接以及宽度和高度是否或多或少它是相同的风格。（我想要正确的链接）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();
})

【问题讨论】：

注意：li之间的br无效。
谢谢，但 br 没有问题，这是我原始代码中的一个示例。

标签： javascript jquery css

【解决方案1】：

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

【讨论】：

谢谢，您在标题中使用了内容工具提示我有一个内容工具提示，其中包含 html 代码的原始代码很长，没有文字低（这只是我的代码示例），您想指导我而不做更改在我的 HTML 中？