在点击外部弹出窗口隐藏Bootstrap Popover

Question

I'm trying to hide the Bootstrap Popover when the user clicks anywhere outside the popover. (I'm really not sure why the creators of Bootstrap decided not to provide this functionality.)

I found the following code on the web but I really don't understand it.

// Hide popover on click anywhere on the document except itself
$(document).click(function(e) {
    // Check for click on the popup itself
    $('.popover').click(function() {
        return false; // Do nothing
    });  
    // Clicking on document other than popup then hide the popup
    $('.pop').popover('hide');  
});

The main thing I find confusing is the line $('.popover').click(function() { return false; }); . Doesn't this line add an event handler for the click event? How does that prevent the call to popover('hide') that follows from hiding the popover?

And has anyone seen a better technique?

Note: I know variations of this question has been asked here before, but the answers to those questions involve code more complex than the code above. So my question is really about the code above

Answer 1

I made http://jsfiddle.net/BcczZ/2/ , which hopefully answers your question

Example HTML

<div class="well>
    <a class="btn" data-toggle="popover" data-content="content.">Popover</a>
    <a class="btn btn-danger bad">Bad button</a>
</div>

JS

var $popover = $('[data-toggle=popover]').popover();

//first event handler for bad button
$('.bad').click(function () {
    alert("clicked");
});


$(document).on("click", function (e) {
    var $target = $(e.target),
    var isPopover = $target.is('[data-toggle=popover]'),
        inPopover = $target.closest('.popover').length > 0

    //Does nothing, only prints on console and wastes memory. BAD CODE, REMOVE IT
    $('.bad').click(function () { 
        console.log('clicked');
        return false;
    });

    //hide only if clicked on button or inside popover
    if (!isPopover && !inPopover) $popover.popover('hide');
});

As I mentioned in my comment, event handlers don't get overwritten, they just stack. Since there is already an event handler on the .bad button, it will be fired, along with any other event handler

Open your console in the jsfiddle, press 5 times somewhere on the page (not the popover button) and then click bad button you should see clicked printed the same amount of times you pressed

Hope it helps

---

PS: If you think about it, you already saw this happening, especially in jQuery. Think of all the $(document).ready(...) that exist in a page using multiple jquery plugins. That line just registers an event handler on the document's ready event

Answer 2

I just did a more event based solution.

var $toggle = $('.your-popover-button');
$toggle.popover();

var hidePopover = function() {
    $toggle.popover('hide');
};

$toggle.on('shown', function () {
    var $popover = $toggle.next();
    $popover.on('mousedown', function(e) {
        e.stopPropagation();
    });
    $toggle.on('mousedown', function(e) {
        e.stopPropagation();
    });
    $(document).on('mousedown',hidePopover);
});

$toggle.on('hidden', function () {
    $(document).off('mousedown', hidePopover);
});

Answer 3

short answer insert this to bootstrap min.js

when popout onblur will hide popover
when popout more than one, older popover will be hide

$count=0;$(document).click(function(evt){if($count==0){$count++;}else{$('[data-toggle="popover"]').popover('hide');$count=0;}});$('[data-toggle="popover"]').popover();$('[data-toggle="popover"]').on('click', function(e){$('[data-toggle="popover"]').not(this).popover('hide');$count=0;});

Answer 4

None of the above solutions worked 100% for me because I had to click twice on another, or the same, popover to open it again. I have written the solution from scratch to be simple and effective.

   $('[data-toggle="popover"]').popover({
        html:true,
        trigger: "manual",
        animation: false
    });

    $(document).on('click','body',function(e){
        $('[data-toggle="popover"]').each(function () {
            $(this).popover('hide');
        });

        if (e.target.hasAttribute('data-toggle') && e.target.getAttribute('data-toggle') === 'popover') {
            e.preventDefault();
            $(e.target).popover('show');
        }
        else if (e.target.parentElement.hasAttribute('data-toggle') && e.target.parentElement.getAttribute('data-toggle') === 'popover') {
            e.preventDefault();
            $(e.target.parentElement).popover('show');
        }
    });

Answer 5

My solution, works 100%, for Bootstrap v3

$('html').on('click', function(e) {
    if(typeof $(e.target).data('original-title') !== 'undefined'){
         $('[data-original-title]').not(e.target).popover('hide');
    }

    if($(e.target).parents().is('[data-original-title]')){
         $('[data-original-title]').not($(e.target).closest('[data-original-title]')).popover('hide');
    }

    if (typeof $(e.target).data('original-title') == 'undefined' &&
!$(e.target).parents().is('.popover.in') && !$(e.target).parents().is('[data-original-title]')) {
        $('[data-original-title]').popover('hide');
    }
});