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

Question

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

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

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

当悬停发生得太靠近窗口边缘时，如何推动工具提示以使宽度不受影响？这是我显示工具提示的代码。

我希望将默认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();
});