Question

我有这个工具提示：

 $(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $("body").find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip        
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        } 
        tip.css({  top: mousey, left: mousex });
    });
});

和CSS：

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none;
    padding:10px;
    position:relative;z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

我如何使用：

<a class="tip_trigger"><span class="tip">This will show up in the tooltip</span></a>

问题：当工具提示位于具有position: relative的元素内时，工具提示会变化，工具提示会移开...

我想这是因为工具提示div是position: absolute，所以我该如何解决？

希望你理解我，我的英语不太好......

编辑1 ：

完整的图片解释： enter image description here

编辑2 ：我上传了我的网站，所以你可以在现场看到... 网址为：http://superdown.me/gladiator。 在两个字段中输入值：“admin”（用户名和密码）。

登录后，将鼠标悬停在“37.5％”处，您会在页面顶部看到它。

Answer 1

让你的.tip_trigger职位相对：

.tip_trigger {
    position: relative;
}

然后重新定位您的.tip。现在它总是在一个相对定位的项目内，并且应该是一致的。

Answer 2

在.tip上使用position: absolute。仅在position: relative上使用.tip_trigger，会让您的文字翻转。

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none;
    padding:10px;
    position:absolute;
    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

Jsfiddle：http://jsfiddle.net/eKWJe/3/

<强>更新

这个问题可能有另一个解决方案，但您可以将<span class="tip"></span>放在容器之外。像这样：

<body>
  <span class="tip">This will show up in the tooltip</span>
  <div id="header">
      ---
  </div>
</body>

Jsbin：http://jsbin.com/ojuras/2/edit

jquery - 工具提示在相对位置移动

2 个答案: