即使将“触发器”设置为“焦点”，表格行上的 Bootstrap Popover 也不会关闭

Question

我正在尝试验证一些表格内容并在包含错误时在行旁边显示一个弹出框。

Popover 是动态创建并显示的：

$('table#requests tbody tr')
.eq(1)  // highlight row #1
.popover({
    trigger: 'focus',
    placement: 'right',
    html: 'true',
    title: '<strong>Error!</strong>',
    content: 'This line does not make any sense. Click anywhere in the document to close this popover.',
    container: 'body',
})
.popover('show');

但是，弹出窗口不能通过在元素外部单击来消除，这是预期的，并记录在 Bootstrap 文档中。我确保将 trigger 设置为 focus 和 container 设置为 body 以避免与表格相关的元素产生副作用。

我设法在https://jsfiddle.net/e31dcs4n/2/ 重现了这个问题

请注意，删除trigger 选项允许单击该行以关闭弹出框（默认行为，因为弹出框附加到该行）。但是，我希望用户能够点击anywhere来移除弹出框。

另请注意，调用.focus()（如Bootstrap Popover Dismissable is not working 中所述）也无济于事。

Answer 1

回答您的第一个问题。您可以将点击事件添加到body，其中您可以查看点击是否发生在body 之外，并基于此您可以hide popover。

$('body').on('click', function(e) {
  if ($(e.target).data('toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) {
    $('.popover').popover('hide');
  }
});

Here's the DEMO

---

我不确定是否以正确的方式回答了 cmets 中指定的其他问题。但是根据 post here 弹出框不适用于 tables。我也尝试了他在那里提到的解决方法，但效果不佳。唯一有效的是触发行的hover，其中您不需要添加上述隐藏解决方案。

$(function() {
  $('table#requests tbody tr:eq(1)').popover({
    placement: 'right',
    html: 'true',
    trigger: 'hover',
    title: '<strong>Error!</strong>',
    container: 'body',
    content: 'This line does not make any sense. Click anywhere in the document to close this popover.',
  })
});

Here's a DEMO 对于上述行为。