Bootstrap Popover content clickable when hidden

Question

My site has multiple popovers over a map (just a div with background image) with clickable icons:

When clicking those icons, a popover is shown. This popover has a carousel that contains text with links:

When I click outside the popover, all popovers are hidden. This supposedly works ok. I got the code from this Stack Overflow question.

But the real issue occurs when you click outside the popover to hide it again. The popover is hidden, but it's still in the DOM. This means the links are still clickable!

When I click the plus icon to hide the popover, the popover is hidden (removed?), but when clicking outside the plus (i.e. anywhere on the page), the popover is still present (but not visible) right above </body>.

Please help! This annoys the hell out of me.. :(

Edit: Might be worth mentioned that the popovers are dynamically added:

$('.plus').each(function(i) {

    var $self = $(this);

    $self.popover({
        html: true,
        title: false,
        placement: function() {
            return 'auto left'; // TODO: calculate placing
        },
        content: function() {

            var html   = '<div id="carousel-' + i + '" class="carousel slide">';
            var list   = '<ol class="carousel-indicators">';
            var slides = '<div class="carousel-inner">';

            var count = 0;

            $('.post[data-category="' + $(this).data('category') + '"]').each(function(j) {

                // add indicator for slide
                list += '<li data-target="#carousel-' + i + '" data-slide-to="' + count + '"' + (count == 0 ? ' class="active"' : '') + '></li>';

                // add html for slide
                slides += '<div class="item' + (count == 0 ? ' active' : '') + '">' + $(this).html() + '</div>';

                // increase counter
                count++;

            });

            // merge all html
            html += list + '</ol>' + slides + '</div></div>';

            return html;
        }
    });

user2744441 · Answer 1 · 2013-09-04T03:01:04.603

3

I had a similar issue, big headache, and searching I got to this page:

https://github.com/twbs/bootstrap/issues/4215

Apparently when you add Popovers to dynamic content you need to add this option:

selector: '[rel="popover"]'

in your case it would be

$self.popover({
    selector: '[rel="popover"]'
    html: true,
    title: false,
    ...

This resolved all my "hidden popover clicks detection" issues.

edited Sep 04 '13 at 03:01

answered Sep 03 '13 at 22:03

user2744441

31
3

Thanks for digging this up. This solution worked for my dynamically created popovers. The issue I was facing surfaced when creating a popover which dynamically creating a popover for auto-search results and another for form validation on the same element. I was using "destroy" to remove the popover, however I was still able to click the contents which triggered other actions.This answer should be upvoted more due to the reference to the BS issue log. – Josh Apr 06 '15 at 11:56

score 2 · Answer 2 · answered Oct 23 '13 at 08:00

2

This is what I did in order to prevent elements within the hidden popover from being clicked

$('button.new-history').on('hidden.bs.popover', function () {
    $(this).next().remove();
})

The idea being that when the popover is hidden, you should remove it from the DOM.

Hope it helps!

answered Oct 23 '13 at 08:00

Salman Hasrat Khan

1,971
1
20
27

I would just add the '.popover' selector to the next() function call to prevent removing other DOM elements if the popover was already removed: **$(this).next('.popover').remove();** – Thomas C. G. de Vilhena Apr 11 '14 at 01:03
Its not necessary the .popover element is always next to the element on which popover is applied. Most of the times we use popover option container where it is binded to other elements in the dom for eg body! – bhavya_w Jul 11 '14 at 13:59

score 2 · Answer 3 · answered Apr 14 '14 at 18:54

None of the other solutions worked for me because I'm using other functions to only allow one popover at a time, and to hide the popover when it loses focus (they are also dynamically generated).

But I found a very simple solution using css to 'fix' this issue:

.popover.fade {
    z-index:-1;
}

.popover.fade.in {
    z-index:2;
}

Just make sure the .popover.in has a higher z-index than your other elements, and similarly that the one without .in has a lower z-index.

score 1 · Answer 4 · answered Mar 07 '16 at 19:27

I faced the same problem and after searching a while in the F12 mode in Chrome, I found the following solution was working for me.

After closing the popover manually with a button:

<button 
  type=button 
  class="btn btn-default pull-right"
  onclick="$('.mypopoverclass').popover('hide');">
    Close
</button>

the content of the popover still was there, invisible and hiding other elements on the page.

I changed the button a little like this:

<button 
  type=button 
  class="btn btn-default pull-right"
  onclick="$('.mypopoverclass').popover('hide'); $('.popover.fade').remove()">
    Close
</button>

By adding

  $('.popover.fade').remove()

to the button onClick handler, the popover window was removed and no longer hiding elements on the screen. Also, next calls to the popover window, will show it again.

I hope it will work for you as well!

score 0 · Answer 5 · answered Sep 01 '13 at 21:39

0

I think you need to "destroy" the popover, not just to "hide" it.

See the API here: http://getbootstrap.com/2.3.2/javascript.html#popovers

answered Sep 01 '13 at 21:39

Hans

505
4
4

1

Thanks for the tip, but I've tried that, and that results in the popovers never shows up again. – rebellion Sep 01 '13 at 21:47
@rebellion sorry to hear that, but popover('destroy') should work as described in the documentation. If it's not working, than the bug must be somewhere else, unless you use an older Bootstrap: http://stackoverflow.com/questions/12130265/javascript-error-when-destroying-bootstrap-popover – Hans Sep 01 '13 at 22:00
Thanks @Hans, I've updated my question with the code for the dynamically added popover. Do you think that has something to do with the `destroy` issue? – rebellion Sep 01 '13 at 22:12
@rebellion :I can't see from that code how could it influence the 'destroy' functionality but it could explain why the 'hide' can't really hide the links: since they're referenced by carousel API. E.g. if you put simple links in the HTML of the popover they would not be click-able when using popover('hide'), so it's the Carousel that seems to be causing the problem. – Hans Sep 01 '13 at 22:30
Nice observed. What I can't figure out is that the popover is completely destroyed when clicking the popover trigger element (`.plus`). And it will still work the next time. Hmm.. – rebellion Sep 01 '13 at 22:51

Bootstrap Popover content clickable when hidden

5 Answers5