Question

所以我有这个工具提示改变mousemove事件的位置。它工作正常，但我希望当它到达右上角时，工具提示要么隐藏，要么快照到右侧。示例：http://jsfiddle.net/bortao/qN3RP/

当然我可以取父元素的宽度，检查它是否更大并限制它，但这会使代码重载一点。

我也可以设置正文overflow: hidden，但我不能，因为还有其他要滚动的元素。

还有其他出路吗？类似于max-right。

Answer 1

您可以使用以下代码它工作正常

<html>
<head>
<script src="jquery-1.10.2.js"></script>
<style>
#help {
    white-space: nowrap;
    position: absolute;
    background: yellow;
    color: #111;
    padding: 4px 4px 2px 4px;
}

</style>
<script>
var _offset;
$(document).ready(function(){
$(document).on("mousemove", function (e) {
    if (!_offset) _offset = $("body").offset();
    $("#help").show();
    $("#help").css({
        left: (e.pageX - _offset.left + 10) + "px",
        top: (e.pageY - _offset.top + 25) + "px"
    });


    if((e.pageX - _offset.left + 10)>(window.screen.availWidth-50))
    {
        //you can change the position or hide
            $("#help").css({
            left: (e.pageX - _offset.left - 120) + "px",
            top: (e.pageY - _offset.top + 25) + "px"
        });
            //$("#help").hide();
    }
    else
    {

        $("#help").show();
    }

});
});
</script>
</head>
<body>
<div id="help">This is some help</div>
</body>
</html>

Answer 2

您可以使用以下内容：

var _offset;
$(document).on("mousemove", function (e) {
    if (!_offset) _offset = $("body").offset();
    $("#help").show();
    $("#help").css({

        left: (e.pageX - _offset.left) > 400 ? '400px' : (e.pageX - _offset.left + 10) + "px" ,
        top: (e.pageY - _offset.top + 25) > 400 ?  '400px' : (e.pageY - _offset.top + 25) + "px"
    });
})

将值400增加/减少到所需的值。

fiddle

Answer 3

<强> DEMO

jQuery

var _offset;
$(document).on("mousemove", function (e) {
    if (!_offset) _offset = $("body").offset();



    var calc = e.pageX;
    var getWidth = $('body').width() - $("#help").width();
    $("#help").show();


    if (calc > getWidth) {           
        $("#help").css({
            right: (e.pageX - _offset.right) + "px",
            top: (e.pageY - _offset.top + 25) + "px"

        });
    } else {
        $("#help").css({
            left: (e.pageX - _offset.left + 10) + "px",
            top: (e.pageY - _offset.top + 25) + "px",
            right: "auto"
        });
    }


})

可根据文档的动态宽度进行调整

body{overflow:hidden;}

添加了隐藏的溢出，因此滚动 bar不会影响工具提示的位置

希望它有所帮助！

通过CSS限制元素位置

3 个答案: