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

Don't know why the tooltip box(class .show_tooltip) shows up on the left when mouse enters on li a. I want to display each tooltip box on top of the same link that mouse is, i.e. just above/left of the link. Links have to be on the right just as they are now, so please do not change my html code) DEMO

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

Example : Mouseover on "how": What can I do to get it like this?

示例：鼠标悬停在“如何”上：我该怎么做才能得到它？

These codes are a small specimen part from my original code, which is quite long.

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

CSS:

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:

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:

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

2 个解决方案

#1

Firstly, you are making the markup complicated that way, but since you told not to modify the HTML, here's what you can do to place the tooltip just next to the link.

首先，您正在以这种方式使标记变得复杂，但由于您已经告知不要修改HTML，因此您可以执行以下操作来将工具提示放在链接旁边。

Working Demo -> http://jsfiddle.net/bikerabhinav/AQh6y/8/

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

Explanation: Get the width of parent container (to act as the axis/base)

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

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

Get the left-offset of link :

获取链接的左偏移量：

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

Apply these to the CSS of tooltip. Position it absolutely:

将这些应用于工具提示的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: this is more of a hack basically, but I hope you get what I'm trying to do here. A much better way would be if you clean up the HTML

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

#2

is that you want --> DEMO

是你想要的 - > DEMO

change position: fixed; in .show_tooltip{}

改变立场：固定; in .show_tooltip {}