Bootstrap Popover悬停内容时自动关闭的问题解决求助

使用Bootstrap Popover功能，HTML代码如下：

<header> 
  <a class="my-popover" data-popover="my-popover" popover-placement="bottom" data-html="true" data-toggle="popover" data-container="nav">open</a>
  <div class="my-popover-flyout hide">
    <h1>Popover content</h1>
    <button>Click Me</button>
  </div>
</header>

对应的JS代码（实现聚焦或悬停触发弹出框）：

const popover = $('.my-popover'); 
const header = document.getElementsByTagName('header')[0] 
$(popover).popover({ 
  container: header, 
  delay: { show: 0, hide: 25 }, 
  placement: 'bottom', 
  html: true, 
  content: $(`.${$(popover).attr('data-popover')}-flyout`).html(), 
  trigger: 'focus hover', 
});

当前弹出框可正常显示，但悬停到弹出框内容区域时会立即关闭，无法点击其中的按钮。将弹出框容器设为a标签时功能正常，但需要将容器设置为header，需解决此问题。

问题根源是：默认的hover触发仅监听触发元素（<a>标签）的鼠标事件，当鼠标从<a>移到popover内容上时，会触发<a>的mouseleave事件，导致popover关闭。而将容器设为<a>时，popover是<a>的子元素，鼠标在popover上时不会触发<a>的mouseleave，因此正常。

要保留header作为容器，可通过手动控制popover的显示/隐藏逻辑解决，步骤如下：

1. 初始化popover时将trigger设为manual，放弃默认的hover/focus自动触发
2. 手动绑定触发元素的mouseenter、focus事件来显示popover
3. 监听header和popover的鼠标事件，只有当鼠标完全离开触发元素和popover区域时才隐藏

修改后的JS代码：

const $popoverTrigger = $('.my-popover');
const $header = $('header');
const $popoverFlyout = $(`.${$popoverTrigger.attr('data-popover')}-flyout`);

// 初始化popover，使用手动触发模式
$popoverTrigger.popover({
  container: $header,
  delay: { show: 0, hide: 300 }, // 延长隐藏延迟，给鼠标移动留缓冲时间
  placement: 'bottom',
  html: true,
  content: $popoverFlyout.html(),
  trigger: 'manual'
});

// 鼠标移入触发元素或获取焦点时，显示popover
$popoverTrigger.on('mouseenter focus', function() {
  $(this).popover('show');
});

// 鼠标离开header时，检查是否同时离开popover，再决定是否隐藏
$header.on('mouseleave', function(e) {
  const $popover = $('.popover');
  if (!$popover.is(e.relatedTarget) && !$popoverTrigger.is(e.relatedTarget)) {
    $popoverTrigger.popover('hide');
  }
});

// 鼠标移入popover时，保持popover显示
$('body').on('mouseenter', '.popover', function() {
  $popoverTrigger.popover('show');
});

// 鼠标移出popover时，延迟隐藏，避免误操作
$('body').on('mouseleave', '.popover', function() {
  setTimeout(() => {
    const $popover = $('.popover');
    if (!$popoverTrigger.is(':hover') && !$popover.is(':hover')) {
      $popoverTrigger.popover('hide');
    }
  }, 300);
});

// 处理焦点丢失逻辑：如果焦点没有移到popover内，则隐藏
$popoverTrigger.on('focusout', function(e) {
  if (!$('.popover').has(e.relatedTarget).length) {
    $(this).popover('hide');
  }
});

关键说明 #

• 使用trigger: 'manual'完全控制popover的显示/隐藏，避开默认逻辑的局限性
• 通过事件委托监听动态生成的popover元素（.popover）的鼠标事件
• 增加延迟隐藏逻辑，给鼠标在触发元素和popover之间移动留足够时间
• 同时处理focus/focusout事件，保证键盘交互的可用性

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