Close popover with HTML on click outside

Question

I am using Bootstrap Popover and popover content is a HTML. I am using below code to initial popover. This code is based on https://stackoverflow.com/a/13203876/1354727 this answer. Popover content is in div with id #song-status-popover.

$(".song-status-link").popover({
            html: true,
            placement: 'bottom',
            content: function () {
                return $("#song-status-popover").html();
            }
});

I wanted to close the popover when I click outside of popover, so I used below code for that:

$('html').on('mouseup', function (e) {
            if (!$(e.target).closest('.popover').length) {
                $('.popover').each(function () {
                    $(this).closest('div.popover').popover('hide');
                });
            }
});

Till now it is doing fine, but I am facing one problem with using both code together. When I open popover and click outside to close it, if I again click on link to open popover, it does not get open in first click. I have to click twice in order to open it.

I want to know what is I am missing and why I am not able to open popover in one click after close it by clicking outside. Please help!

UPDATE: I believe that when I click outside it hides popover, but bootstrap still believes that it is open and on first click it actually consider it closed and on second click it open the popover.

Did you tried this http://stackoverflow.com/questions/28558865/popup-window-close-on-click-outside-not-inside-jquery — Nitin Dhomse, Jul 29 '16 at 08:46
Believe it or not it is the hardest thing to do.either you have make it visible on hover and hide on blur.or you can go with default property click show and click hide.(In case you have multiple popover on same page).This question has been asked many times on SO. — Bugfixer, Jul 29 '16 at 08:49
I have more popover on one page, that is making it more difficult. You can notice that I am using class instead of id as target. However, I want to open same content in all popovers. — Nizam Kazi, Jul 29 '16 at 09:20

madalinivascu · Accepted Answer · 2016-07-29T11:33:50.253

5

try the following code

$('html').on('click', function(e) {
  if (!$(e.target).is('.song-status-link') && $(e.target).closest('.popover').length == 0) {
    $(".song-status-link").popover('hide');
  }
});

http://jsfiddle.net/xzeb91hf/

edited Jul 29 '16 at 11:33

answered Jul 29 '16 at 09:09

madalinivascu

32,064
4
39
55

I guess this will help me to hide the popover when I click out side. My script is doing that already. However, when I click on link to open popover again, I have to click twice as it is not opening on first click. – Nizam Kazi Jul 29 '16 at 09:21
why do you use a mouseup event and not a click event? – madalinivascu Jul 29 '16 at 09:26
because this code `$('html").on('click'` simply restrict popover from getting opened as it immediately hides it. – Nizam Kazi Jul 29 '16 at 11:10

score 2 · Answer 2 · answered Jul 29 '16 at 08:43

2

You have to .find() it with checking it's visiblility/availablity in the DOM with :visibile:

if ($(this).find('.popover:visible').length) {
    $('.popover').popover('hide');
}

answered Jul 29 '16 at 08:43

Jai

74,255
12
74
103

score 1 · Answer 3 · answered Jul 29 '16 at 09:28

This is actually possible natively with bootstrap, with the only downside that there can't be any focusable elements inside the popover.

Look for the section Dismiss on next click in the official documentation.

It's based on the focus event for triggering the popover, and the blur event to hide it again. Clicking outside of the triggering link will fire a blur event and the popover will hide.

Close popover with HTML on click outside

3 Answers3