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

Question

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

这里是一些示例代码:

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

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

我尝试了多种解决方案，包括在使用上面的代码初始化滚动事件后隐藏弹出窗口:

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

使用 bootstrap 4、popper.js 1.15、jquery 3.4、DataTables。

谢谢

Answer 1

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

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

像您尝试的那样在鼠标滚动上触发弹出窗口隐藏将不起作用，因为相同的动画效果将被触发。