Bootstrap 4.1.3下拉菜单+Popover滚动时闪烁问题求助

Got it, let's tackle that annoying popover flicker you're seeing. Here's what's happening and how to fix it:

Why the Flicker Happens #

The issue comes down to how Bootstrap's hover-triggered popovers work. When the popover pops up, if your mouse even slightly drifts onto the popover itself, the original button loses the hover state—so the popover hides. Then your mouse is back over the button, triggering the popover again, and this loop repeats causing the flicker. The scrolling dropdown makes this worse because the menu's fixed height can lead to unexpected mouse position shifts.

The Fix #

We'll adjust the popover's trigger behavior, add a small delay, and add custom logic to keep the popover visible when you hover over it directly. Here's the modified code:

Updated JavaScript

// Populate your dropdown menu as before
for(var i =0;i<15;i++){ 
  $('.dropdown-menu').append('<a class="dropdown-item" > helloWorld <button type="button" class="noneButton lockFont" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> <i class="fas fa-lock clockFont"></i></button></a>') 
}

// Initialize popovers with better trigger settings and delay
$('.lockFont').popover({ 
  trigger: "hover focus", // Use both hover and focus for more reliable behavior
  delay: { show: 100, hide: 300 } // Short delay to prevent instant flicker
});

// Keep popover visible when hovering over it directly
$('.lockFont').on('shown.bs.popover', function() {
  const popoverElement = $(this).data('bs.popover').tip;
  $(popoverElement)
    .on('mouseenter', function() {
      $(this).addClass('popover-active');
    })
    .on('mouseleave', function() {
      $(this).removeClass('popover-active');
      $(this).popover('hide');
    });
});

// Prevent popover from hiding if we're hovering over it
$('.lockFont').on('hide.bs.popover', function(e) {
  const popoverElement = $(this).data('bs.popover').tip;
  if ($(popoverElement).hasClass('popover-active')) {
    e.preventDefault();
  }
});

Optional CSS Adjustment

Add this to make the popover feel more interactive:

.dropdown-menu { 
  height: auto; 
  max-height: 200px; 
  overflow-x: hidden; 
}

.popover {
  cursor: default; /* Makes it clear the popover is hoverable */
}

How This Works #

1. Trigger & Delay: Using hover focus ensures the popover stays visible if the button gets focus (like keyboard navigation), and the delay gives you a small buffer to move your mouse between the button and popover without it disappearing instantly.
2. Popover Hover Handling: We add a class to the popover when you hover over it, and use that class to prevent the popover from hiding until you move away from both the button and the popover itself.

Test this out—you'll be able to hover the lock button, move your mouse onto the popover content, and it won't flicker anymore. When you move away from both elements, the popover will hide after the short delay.

内容的提问来源于stack exchange，提问作者heavywar