0

我得到了这个工具提示：

 $(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：我上传了我的网站，这样你就可以在现场看到它...... URL 是：http ://superdown.me/gladiator 。 在两个字段中输入值：“admin”（用户名和密码）。

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

4

2 回答 2

0

使您的.tip_trigger位置相对：

.tip_trigger {
    position: relative;
}

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

于 2013-02-11T20:51:53.840 回答
0

position: absolute在您的 .tip 上使用。仅使用position: relativeon .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

于 2013-02-11T21:05:10.053 回答