JavaScript：如何使用工具提示跟随光标*和*碰撞？

Question

我对JavaScript很新，所以我觉得这是一个容易解决的问题;拜托我。

对于我的网站，我已经在光标后面加入了一个基于jQuery的工具提示。但是，由于它是我在网上找到的一个工具，我有一些故障排除问题。我想要的是工具提示跟随光标直到工具提示与页面边缘碰撞;当它发生碰撞时，我希望它可以做一些像碰撞：“翻转”这样的事情。我非常理解为什么我的尝试没有奏效。我只知道如何使仅跟随光标或仅使用 .position（）。我不知道如何将两者合并到一个脚本中而不会弄乱其他所有内容。

以下是开发人员网站上提供的脚本：

<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
    // Hover over code
    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip"></p>')
    .text(title)
    .appendTo('body')
    .fadeIn('slow');
}, function() {
    // Hover out code
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip').remove();
}).mousemove(function(e) {
    var mousex = e.pageX + 20; //Get X coordinates
    var mousey = e.pageY + 10; //Get Y coordinates
    $('.tooltip')
    .css({ top: mousey, left: mousex })
});
});
</script>

还有一个CSS组件。据我所知，这并没有涉及到这个问题，但如果是这样的话，那就是瞧瞧。

.tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color: #fff;
font-size:12px;
width: 200px;
}

很抱歉，如果这是一个非常密集的问题，但我一直在努力解决这个问题，而且我已经完全放弃了这一点。

同样，我想要的是工具提示跟随光标，就像它目前一样 - 但不是无限期。当跟随光标会导致工具提示与窗口碰撞，创建一个滚动条时，我希望它显示在光标的另一侧，或者当光标靠近窗口边缘时保持静态。 Anything ，无论如何，无论光标在哪里，工具提示中的内容都会保持可见。

谢谢！

Answer 1

编辑：抱歉，我第一次误读了您的问题。这是解决方案......

＆＃34;技巧＆＃34;是将事件对象设置为传递给of的对象的position()属性值。如果＆＃34;的值为＃34; property是一个包含pageX/pageY的对象，使用这些值。这使您可以轻松地按照鼠标操作，这是一个常见的用例。

$(document).ready(function() {
    // Tooltip only Text
    $('.masterTooltip').hover(function() {
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
    }, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        var mouseXPadding = 20,
            mouseYPadding = 10;
            $('.tooltip').position({
                my: "left+" + mouseXPadding + " top+" + mouseYPadding,
                of: e,
                // within: $('.masterTooltip') // optional to contain tooltip
            });
    });
});

这是另一个更好的imo版本，它考虑到用户可能会意外地将他/她的鼠标移到工具提示上的事实（上述情况不能很好地处理）：

$(document).ready(function() {
    var padding = {
            x = 20,
            y = 10
        },
        $tip = $('<p class="tooltip"></p>');

    // Our helper function that moves tip to the mouse
    function moveTipToMouse(event) {
        $tip.position({
            my: "left+" + padding.x+ " top+" + padding.y,
            of: event,
        });
    }

    // Moves tooltip out of the way if the mouse accidentally goes over it
    $tip.mousemove(moveTipToMouse);

    // Tooltip only Text
    $('.masterTooltip').hover(function() {
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $tip.text(title);
        if (!$.contains(document, $tip[0])) {
            $tip.appendTo('body').fadeIn("slow");
        }
    }, function(event) {
        // Hover out code
        // if the mouse exists to the tooltip, no need to hide it
        if ($tip.is(':hover')) {
            return;
        }
        $('.tooltip').remove();
    }).mousemove(moveTipToMouse);
});

这是小提琴：https://jsfiddle.net/g6wmkzr2/