快速滚动离开悬停触发的弹出窗口不会隐藏弹出窗口

Question

我正在对表格中某些突出显示的行使用悬停触发的弹出窗口，当您使用鼠标滚轮相对快速地从元素滚动离开时，即使您不再悬停目标元素，弹出窗口也会继续显示一秒钟。它创建了一种奇怪的效果，即弹出窗口滚动离开您要滚动到的方向，移动到表格边框之外。

下面是一些示例代码：

​

 $('.popover_class').popover({
   trigger: 'hover',
   placement: 'right'
 })

<tr class="bg-warning popover_class" data-toggle="popover" data-content="example"></tr>

​

我尝试了各种解决方案，包括在使用上面的代码初始化popover后隐藏滚动事件：

$('.popover_class').on('scroll', function() {
      this.popover('hide');
});

使用bootstrap 4，jQuery1.15，popper.js 3.4，DataTables。

谢谢

Answer 1

将popover动画设置为false (默认情况下为true )，这将停止对popover应用CSS淡入淡出过渡。

 $('.popover_class').popover({
   trigger: 'hover',
   placement: 'right',
   animation: false
 });

在鼠标滚动上触发弹出隐藏不会起作用，因为同样的动画效果也会被触发。

Answer 2

在JQuery DataTable控件中显示引导弹出窗口时，我遇到了类似的问题。

​

​

如上面的快照所示，当用户单击剪贴板图标时，将显示弹出消息。当用户单击除DataTable滚动条之外的任何其他位置时，弹出窗口处于隐藏状态。当用户滚动DataTable时，弹出窗口并未隐藏，而是显示在表格外部。

​

​

为了处理这个场景，我在剪贴板图标上使用了mouseleave事件，如下所示：

    $(tableId).off('mouseleave', '.btn-clipboard').on('mouseleave', '.btn-clipboard', function (event: JQueryEventObject) {

        if (event.currentTarget) {
            let controlId = event.currentTarget.id;
            $('#'+controlId).popover("hide");
        }
    });

因此，当鼠标离开剪贴板图标图像时，弹出窗口将隐藏。我希望它能帮助/提供一些想法。