Quickly scrolling away from hover-triggered popover does not hide popover

Question

I am using hover-triggered popovers for certain highlighted rows in a table and when you scroll away from the element relatively quickly using the mouse scroll wheel, the popover continues to show for an extra second even though you are no longer hovering the target element. It creates a strange effect where the popover scrolls away from the direction you are scrolling to, moving outside the border of the table.

Here is some example code:

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

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

I've tried a variety of solutions including hiding the popover on scroll event after initializing it with the code above:

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

Using bootstrap 4, popper.js 1.15, jquery 3.4, DataTables.

Thanks

Perhaps you have transition in your CSS? – boosted_duck Mar 06 '20 at 00:25 — boosted_duck, Mar 06 '20 at 00:25

Mahatmasamatman · Answer 1 · 2020-03-06T01:15:46.763

2

Set your popover animation to false (its true by default), which will stop applying a CSS fade transition to the popover.

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

Triggering popover hide on mouse scroll as you've tried will not work, because the same animation effect will get triggered just the same.

edited Mar 06 '20 at 01:15

answered Mar 06 '20 at 01:07

Mahatmasamatman

1,537
2
6
20

While this didn't fix the issue at hand (in practice, I feel like it should...), it helped with some other behavior I've been trying to remove. Thanks – Neuro_Prog Mar 06 '20 at 01:48
1

Update: I was testing in Firefox where the issue persists. However, this completely fixes the issue in Edge and vastly improves it in Chrome (although the popover still scrolls out of the bounds of the table for a split second if you scroll quickly enough). – Neuro_Prog Mar 06 '20 at 02:22

score 0 · Answer 2 · answered Dec 30 '21 at 08:34

I faced similar issue while displaying bootstrap popover in JQuery DataTable control.

As seen in the above snapshot, the popover message is displayed when the user clicks on the clipboard icon. The popover was hiding when user clicked anywhere else except the DataTable scrollbar. When the user scrolls the DataTable, the popover did not hide and was showing outside of the table.

In order to handle this scenario, I used the mouseleave event on the clipboard icon as shown below,

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

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

So, when the mouse leaves the clipboard icon image, the popover will hide. I hope it helps / gives some idea.

Quickly scrolling away from hover-triggered popover does not hide popover

2 Answers2