jQuery中没有真正的工具提示框答案

【问题标题】：Not worked true tooltip box in jQueryjQuery中没有真正的工具提示框
【发布时间】：2013-03-27 22:22:11
【问题描述】：

不知道为什么当鼠标进入li a 时工具提示框（类.show_tooltip）出现在左侧。我想在与鼠标相同的链接顶部显示每个工具提示框，即在链接的上方/左侧。链接必须和现在一样在右边，所以请不要更改我的html代码）DEMO

示例：鼠标悬停在“如何”上：我该怎么做才能得到这样的结果？

这些代码是我原始代码中的一小部分，它很长。

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>

    <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();
})

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

首先，您使标记变得复杂，但由于您告诉不要修改 HTML，因此您可以将工具提示放在链接旁边。

工作演示 -> http://jsfiddle.net/bikerabhinav/AQh6y/8/

说明：获取父容器的宽度（作为轴/基）

    var t = $('ul').outerWidth();

获取链接的左偏移量：

var l = $(this).offset();

将这些应用到工具提示的 CSS。绝对定位：

$("li a").mouseenter(function(){
    var l = $(this).offset();
    var t = $('ul').outerWidth();
$(this).prev().css({right:t+20-l.left,top:l.top}).fadeIn();
}).mousemove(function(e) {
        $('.tooltip').css('bottom', e.pageY - 10);
        $('.tooltip').css('right', e.pageX + 10);
     }).mouseout(function(){
     $(this).prev().fadeOut();
});

PS：这基本上更像是一种 hack，但我希望你能得到我想要在这里做的事情。一个更好的方法是清理 HTML

【讨论】：

它在我的项目中不起作用，再见：link
这是因为您的 HTML 标记不正确。在 Chrome/FF 中运行良好（为什么你不断修改你提供的链接？我们应该怎么看有什么问题？）无论如何，首先更正 HTML + CSS
好的，我把HTML原件放在link，请看你告诉我，有什么问题吗？ {我更改了链接，因为我使用了 codeigniter，我认为问题可能出在它身上，不能把它放在 jsfiddel 中。请你看到这个LINK 并告诉我什么是错的，HTML 和 CSS 应该改变什么？}

【解决方案2】：

是你想要的 --> DEMO

将position: fixed; 更改为.show_tooltip{}

【讨论】：

你想要什么，我不明白？？你想要那个提示应该出现在悬停的链接上方吗？？