如何让Bootstrap Popover在用户聚焦其内容时不隐藏？

这个问题本质是默认的focus触发逻辑绑定在触发按钮上——当你点击Popover里的内容时，触发按钮会失去焦点，Popover就跟着关闭了。要让Popover在内容被聚焦时保持显示，我们需要手动控制它的显示/隐藏逻辑，而非依赖默认的trigger配置。

下面是调整后的完整代码，我会拆解关键逻辑：

$(function() {
  // 初始化Popover，将trigger设为manual，手动控制显示隐藏
  $('[data-toggle="popover"]').popover({
    trigger: 'manual',
    placement: 'bottom',
    content: "And here's some amazing content. It's very engaging. Right?",
    title: "Popover title",
    html: true,
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
  })
  // 鼠标悬停或按钮聚焦时，显示Popover
  .on('mouseenter focus', function() {
    $(this).popover('show');
  })
  // 鼠标离开或按钮失焦时，延迟执行隐藏逻辑
  .on('mouseleave blur', function() {
    const $trigger = $(this);
    setTimeout(function() {
      const $popover = $trigger.next('.popover');
      // 仅当Popover未被hover且内部无聚焦元素时，才隐藏
      if (!$popover.is(':hover') && $popover.find(':focus').length === 0) {
        $trigger.popover('hide');
      }
    }, 200);
  });

  // 监听Popover内部的焦点状态，确保聚焦时不隐藏
  $(document).on('focusin', '.popover', function() {
    $(this).prev('[data-toggle="popover"]').data('popoverInFocus', true);
  }).on('focusout', '.popover', function() {
    const $popover = $(this);
    const $trigger = $popover.prev('[data-toggle="popover"]');
    setTimeout(function() {
      // 若Popover未被hover且内部无焦点，再执行隐藏
      if (!$popover.is(':hover') && $popover.find(':focus').length === 0) {
        $trigger.popover('hide');
        $trigger.removeData('popoverInFocus');
      }
    }, 200);
  });
});

核心逻辑解释： #

• 手动触发模式：将trigger设为manual，完全接管Popover的显示/隐藏时机，摆脱默认逻辑的限制。
• 延迟隐藏机制：在触发元素的mouseleave和blur事件中加入200ms延迟，给用户足够时间将焦点切换到Popover内部，避免误关闭。
• 双重状态检测：延迟执行隐藏前，检查Popover是否处于被hover状态，或者内部是否有聚焦元素——只要满足其一，就保持Popover显示。
• 内部焦点监听：通过focusin和focusout事件跟踪Popover内部的焦点状态，确保聚焦内容时Popover不会意外关闭。

调整后，无论是悬停触发按钮、聚焦触发按钮，还是聚焦Popover内部的内容，Popover都会保持显示，直到你离开触发按钮和Popover区域，且Popover内部无焦点元素时才会关闭。

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