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

2023年11月4日 140次阅读

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

对不起,如果这是一个非常密集的问题,但我一直在努力解决这个问题,而且我已经完全放弃了这一点.

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

谢谢！

最佳答案 编辑：对不起,我第一次误读了你的问题.这是解决方案……

“技巧”是将事件对象设置为传递给position()的对象的属性值.如果“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版本,它考虑到用户可能会意外地将他/她的鼠标移到工具提示上的事实(上述情况不能很好地处理)：

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

点赞