如何将div作为Bootstrap Popover触发元素并点击内部a标签生效？

看起来你遇到的核心问题是：popover绑定在div上，但点击内部的<a>时，要么没触发popover，要么触发后立刻关闭——这主要是因为data-trigger="focus"的逻辑和焦点转移导致的。我给你两个可行的解决方案，你可以根据需求选择：

方案一：手动控制Popover（推荐，更灵活） #

我们把popover的触发方式设为manual，然后通过JS监听<a>的点击事件来手动显示，同时处理页面其他区域点击关闭的逻辑：

调整后的HTML #

<div style="width:200px; height:200px; background-color:yellow" class="mytooltip" 
     title="Dismissible popover" data-placement="auto right" 
     data-content="Click anywhere in the document to close this popover">
  <a href="#" class="popover-trigger">click me</a>
</div>

对应的JavaScript代码 #

$(document).ready(function() {
  // 初始化popover，禁用自动触发
  $('.mytooltip').popover({
    trigger: 'manual'
  });

  // 点击<a>时显示popover，同时阻止默认跳转
  $('.popover-trigger').on('click', function(e) {
    e.preventDefault();
    $(this).closest('.mytooltip').popover('show');
  });

  // 点击页面其他区域时关闭popover
  $(document).on('click', function(e) {
    // 排除div本身和popover元素
    if (!$(e.target).closest('.mytooltip, .popover').length) {
      $('.mytooltip').popover('hide');
    }
  });
});

方案二：利用原生Focus触发（更简洁） #

给div添加tabindex="0"让它可以获取焦点，然后调整触发方式为click focus，点击<a>时手动让div获得焦点：

调整后的HTML #

<div tabindex="0" style="width:200px; height:200px; background-color:yellow" class="mytooltip" 
     title="Dismissible popover" data-trigger="click focus" 
     data-placement="auto right" data-content="Click anywhere in the document to close this popover">
  <a href="#" class="popover-trigger">click me</a>
</div>

对应的JavaScript代码 #

$(document).ready(function() {
  // 正常初始化popover
  $('.mytooltip').popover();

  // 点击<a>时，让父div获得焦点以触发popover
  $('.popover-trigger').on('click', function(e) {
    e.preventDefault();
    $(this).closest('.mytooltip').focus();
  });
});

为什么原来的方法不行？ #

你之前用data-trigger="focus"绑定在div上，但div默认是无法获取焦点的（除非设置tabindex），而且点击<a>时，浏览器会自动把焦点转移到<a>标签上，导致div立刻失去焦点——这就是popover要么不显示，要么一闪而逝的原因。

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