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

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:

完整的图片说明:

---

编辑 2: 我上传了我的网站，所以你可以实时看到它...... 网址是:http://superdown.me/gladiator . 在两个字段中输入值:“admin”(用户名和密码)。

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

Answer 1

让你的 .tip_trigger 位置相对:

.tip_trigger {
    position: relative;
}

然后重新定位您的.tip。现在它将始终位于相对定位的元素内并且应该保持一致。