JavaScript：如何让工具提示跟随光标并在碰撞时翻转？

Question

JavaScript：如何让工具提示跟随光标并在碰撞时翻转？

4

我对JavaScript还不是很熟悉，所以我认为这是一个容易解决的问题，请耐心等待。

在我的网站上，我加入了一个基于jQuery的提示框，它会跟随鼠标移动。但由于它是我在线找到的工具，所以我遇到了一些故障排除问题。我想让提示框跟随鼠标移动，直到碰到页面的边缘为止；当它碰到边缘时，我想让它执行类似collision: "flip"的操作。我基本上明白为什么我的尝试没有成功。我只知道如何使它只跟随鼠标或只使用.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;
}

非常抱歉，如果这是一个非常密集的问题，但我一整天都在尝试弄清楚这个问题，到现在为止我已经放弃了。

再次强调，我的要求是让工具提示跟随鼠标移动，就像它目前所做的那样 - 但不是无限期地。当跟随鼠标移动会导致工具提示与窗口发生碰撞，创建滚动条时，我希望它出现在鼠标的另一侧，或者随着鼠标靠近窗口边缘而保持静态。 无论如何，请确保工具提示中的内容始终可见，无论鼠标移动到哪里。

谢谢！

- Baldr Eldursson

我在这里创建了一个JSfiddle，其中包含您的代码：https://jsfiddle.net/usLxzvdg/ - Maria Ines Parnisari

不要忘记选择一个答案。 - Philip Ramirez

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Philip Ramirez · Accepted Answer

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

“诀窍”在于将事件对象设置为传递给position()的对象的of属性值。如果“of”属性的值是包含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
            });
    });
});

这里是另一个更好的版本，考虑到用户可能会意外将鼠标移动到工具提示上（这种情况上面的版本无法处理）：

$(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/