检测工具提示何时位于叠加包装器之外

Question

我试图找出如何检测此工具提示何时溢出主div，以便我可以更改其类。当容器上有隐藏的溢出时，它位于用户视图的外部，因此我需要更改行的每个最后一个元素（或任何离开包装器的元素），以便工具提示位于另一侧。

见截图：

我已经尝试了我在这里可以找到的每个人的代码，但没有一个能够工作。

Answer 1

在没有看到您的特定代码的情况下，我只能提出基本建议，但是在使用jQuery之前我是如何检测到的（我的示例检测到x轴上的视口溢出，但可能很容易为你的父div修改。）

jQuery('#mainnav .menu > .menu-item').hover(function(){
    var viewportWidth = jQuery(window).width();
    var submenuLeft = jQuery(this).offset().left;
    var submenuRight = submenuLeft+jQuery(this).children('.sub-menu').width();
    if (submenuRight > viewportWidth) {
        jQuery(this).children('.sub-menu').css('left', 'auto').css('right', '0');
    } else {
        jQuery(this).children('.sub-menu').css('left', '0').css('right', 'auto');
    }       
}, function(){
        jQuery(this).children('.sub-menu').css('left', '-9999px').css('right', 'auto');
});

基本上，在悬停时，这会设置视口宽度的变量（您可以将其更改为父div），子菜单的左侧位置（这将是您的工具提示），子菜单的正确位置（同样，您的工具提示）将其宽度添加到其左侧位置。然后，如果右侧位置的x值大于视口宽度，请将css设置为一个，否则将其设置为默认值。

自编写该片段以来，我现在建议使用.addClass（）而不是.css（），但这说明了这个想法更容易一些。 希望有所帮助，或至少给你一些思考的食物。