Question

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

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

enter image description here

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

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

Answer 1

是你想要的 - ＆gt;的 DEMO

更改position: fixed;
中的.show_tooltip{}

Answer 2

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

工作演示 - ＆gt; 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：这基本上是黑客攻击，但我希望你能得到我在这里想做的事情。一个更好的方法是清理HTML

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

2 个答案: