Bootstrap Popover on table row does not dismiss, even with 'trigger' set to 'focus'

Question

I am trying to validate some table contents and display a popover next to a row whenever it contains an error.

The Popover is created dynamically and displayed with:

$('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');

But then the popover cannot be dismissed with a click outside the element, es expected and documented in the Bootstrap documentation. I made sure to set triggerto focusand container to body to avoid side-effects with table-related elements.

I managed to reproduce the issue at https://jsfiddle.net/e31dcs4n/2/

Note that removing the trigger option allows clicking on the row to dismiss the popover (default behavior, because the popover is attached to the row). However, I want the user to be able to click anywhere to remove the popover.

Also note that calling .focus(), as detailed in Bootstrap Popover Dismissable is not working does not help.

Answer 1

Answering your first question. You can add a click event to body wherein you can see whether the click happened outside the body and based on that you can hide the 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

---

I am not sure whether am answering your additional question specified in the comments, in a right way. But as per the post here popover doesn't work well with tables. I also tried workaround mentioned by him there, but it did not cope up well. The only thing works there is triggering hover of row, where in you don't need above hiding solution to be added.

$(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 for above behaviour.