在鼠标悬停时，检测元素是否位于 window 的右边缘并将元素移动到 - jQuery

Question

我创建了一个工具提示，它在鼠标悬停在元素上时显示。 tooltip的fixed位置是根据鼠标的当前位置计算的。因此，根据鼠标悬停在元素上的位置，工具提示将显示在那里。它工作正常，直到它靠近屏幕边缘。

例如，只要工具提示的边缘没有到达window的边缘，工具提示的宽度就不会受到影响。（见下图）

但是，当您将鼠标悬停在元素上并且它足够靠近 window 的边缘时，工具提示的宽度会被压扁。（见下图）

当悬停太靠近 window 的边缘时，我如何将工具提示推到上方以使宽度不受影响？这是我显示工具提示的代码。

我想将默认的 offset 变量设置为 150，这会将工具提示的中心直接放在鼠标光标下方。那是我通常想要的地方。但是当它在屏幕边缘时，我希望它稍微移动一点，所以我将它设置为 300。

但它不起作用。工具提示没有移动。

/* Custom Shop Page Toolip */
$('.product-bottom-info-container').hover(function(e) {
    var window_Width = $(window).width();
    var tooltip = $(this).find('.product-custom-tooltip-container');
    var offset;

    if ((tooltip.offset().left + tooltip.outerWidth()) >= window_Width) {
        offset = 300;
    }
    else {
        offset = 150;
    }

    $(this).find('.product-custom-tooltip-container').css({
        display: 'inline-block',
        position: 'fixed',
        zIndex: '5000',
        top: e.pageY,
        left: e.pageX - offset
    });
}, function() {
    $(this).find('.product-custom-tooltip-container').hide();
});

应该移动工具提示的部分是这个

    var window_Width = $(window).width();
    var tooltip = $(this).find('.product-custom-tooltip-container');
    var offset;

    if ((tooltip.offset().left + tooltip.outerWidth()) >= window_Width) {
        offset = 300;
    }
    else {
        offset = 150;
    }

但这不起作用。

Answer 1

Michael Sacket 建议使用 jquery position plugin 并让它处理冲突。既然已经有了扩展，为什么还要担心呢？

所以这是我使用 .position 插件的新代码。简单。

$('.product-bottom-info-container').hover(function(e) {
    $(this).find('.product-custom-tooltip-container').css({
        display: 'inline-block',
        position: 'fixed',
        zIndex: '5000',
        whiteSpace: "nowrap"
    }).position({
        my: "center",
        of: e,
        collision: "fit"
    });
}, function() {
    $(this).find('.product-custom-tooltip-container').hide();
});

在鼠标悬停时，检测元素是否位于 window 的右边缘并将元素移动到 - jQuery

On mouse hover, detect if element is at right edge of window and move the element over - jQuery

jquery

tooltip

offset