Bootstrap Popover Doesn't Close on Clicking Outside

Question

I followed this solution on how to close a Bootstrap Popover when clicking anywhere outside, https://stackoverflow.com/a/14857326/1005607

$('body').on('click', function (e) {
    //only buttons
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

But something still doesn't work, my JSFiddle: https://jsfiddle.net/m2k0wgys/3/

In this JSFiddle, clicking outside doesn't close the Popover. My Popovers are nested inside A-links. Sample format:

<a href="..>
   <input type="image" src="info.png" data-toggle="popover" data-content=".." />
</a>

Not sure how much content you're putting into the popover but perhaps your better suited to use Tooltips instead? Just need to change your data attributes and initialize the tooltips via a simple JS call. https://jsfiddle.net/m2k0wgys/4/ — Devin, Dec 08 '17 at 17:35
Thanks for the suggestion but can't use tooltips as this is specifically a Click-triggered popup, not a Hover-triggered one. Mobile users, for example, won't be able to see Hover Tooltips, only a clickable Popover. — gene b., Dec 08 '17 at 17:42

score 0 · Answer 1 · answered Dec 10 '17 at 14:43

I managed to solve it by adding following line of code to img tag

data-trigger="focus" role="button" tabindex="0"

Also the above body click js code is also not needed. Remove that can code and it should work fine.

The reference of above code can be found in documentation here https://getbootstrap.com/docs/3.3/javascript/#popovers

Hope this helps, let me know in case of any doubts.

score 0 · Answer 2 · answered Dec 10 '17 at 14:52

For buttons containing text only:

$('body').on('click', function (e) {
//did not click a popover toggle or popover
if ($(e.target).data('toggle') !== 'popover'
    && $(e.target).parents('.popover.in').length === 0) { 
    $('[data-toggle="popover"]').popover('hide');
}

});

check the stackoverflow link enter link description here

Bootstrap Popover Doesn't Close on Clicking Outside

2 Answers2