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

Question

我是 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;
}

抱歉，如果这是一个非常密集的问题，但我一整天都在努力解决这个问题，但我几乎放弃了这一点。

同样，我想要的是让工具提示跟随光标，就像它目前所做的那样——但不是无限期地。当跟随光标会导致工具提示与 window 碰撞时，创建一个滚动条，我希望它出现在光标的另一侧，或者随着光标移近边缘而保持静止window。 任何东西，在任何情况下，无论光标移到哪里，工具提示中的内容都保持可见。

谢谢！

Answer 1

编辑： 抱歉，我第一次看错了你的问题。这是解决方案...

"trick"是将事件对象设置为传给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
            });
    });
});

这是另一个更好的 imo 版本，它考虑了用户可能不小心将 his/her 鼠标移到工具提示上的事实（上述处理不当的情况）：

$(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);
});

这里是fiddle：https://jsfiddle.net/g6wmkzr2/

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

JavaScript: how do I make a tooltip follow the cursor and flip on collision?

javascript

jquery

html

css

tooltip

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

JavaScript: how do I make a tooltip follow the cursor *and* flip on collision?

javascript

jquery

html

css

tooltip

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

JavaScript: how do I make a tooltip follow the cursor and flip on collision?