CODEWITHSUNDEEP
twitter-bootstrappopover
Ante Vrli
Ante Vrli

Reputation: 3175

How to dismiss a Twitter Bootstrap popover by clicking outside?

Can we get popovers to be dismissable in the same way as modals, ie. make them close when user clicks somewhere outside of them?

Unfortunately I can't just use real modal instead of popover, because modal means position:fixed and that would be no popover anymore. :(

Upvotes: 311

Views: 275093

Answers (30)

Everything Digital
Everything Digital

Reputation: 191

This worked for me.

Breakdown:

First, add a click event listener to the body.

On Click, check whether or not there's an element with a popover class (Bootstrap removes the popover element from the DOM on dismissal).

If the .popover element exists, check the event.target which will tell you where the User clicked on the page. If it's part of the .popover element, do nothing. If not, hide the popover (docs here).

NOTE: The aria-describedby condition prevents the popover from being hidden when it is initially fired/shown.

document.body.addEventListener('click', event => {
  let isPopoverShown = Boolean(document.querySelector('.popover'));
  let isClickNotPopover = !event.target.closest('.popover');

  if (
        isPopoverShown 
     && isClickNotPopover 
     && !event.target?.getAttribute('aria-describedby')?.startsWith('popover')
  ) {
     $('.popover').popover('hide')
  }

})

Upvotes: 0

Elyor
Elyor

Reputation: 5532

Bootstrap 5 UPDATE:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-bs-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } 
    });
})

Upvotes: 6

ravi
ravi

Reputation: 1220

Just add this attribute to html element to close popover in next click.

data-trigger="focus"

reference from https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

Upvotes: 7

thenatsky
thenatsky

Reputation: 51

For anyone looking for a solution that works with Bootstrap 5 and no jQuery, even when the popovers are dynamically generated (ie manually triggered):

document.querySelector('body').addEventListener('click', function(e) {
    var in_popover = e.target.closest(".popover");

    if (!in_popover) {
        var popovers = document.querySelectorAll('.popover.show');

        if (popovers[0]) {
            var triggler_selector = `[aria-describedby=${popovers[0].id}]`;

            if (!e.target.closest(triggler_selector)) {
                let the_trigger = document.querySelector(triggler_selector);
                if (the_trigger) {
                    bootstrap.Popover.getInstance(the_trigger).hide();
                }
            }
        }
    }
});

Upvotes: 5

Sunshow
Sunshow

Reputation: 21

According to highest two answers, I have a little fix:

<span class="btn btn-info btn-minier popover-info" data-rel="popover"
                                              data-placement="bottom" data-html="true" title=""
                                              data-content="popover-content"
                                              data-original-title="popover-title">
                                            <i class="ace-icon fa fa-info smaller-100"></i>
                                        </span>

            $('[data-rel=popover]').popover({html: true});
            $(document).on("shown.bs.popover", '[data-rel=popover]', function () {
                $('[data-rel="popover"][popover-show="1"]').popover('hide');
                $(this).attr('popover-show', '1');
            });
            $(document).on("hidden.bs.popover", '[data-rel=popover]', function () {
                if ($(this).attr('popover-show') === '0') {
                    // My important fix: using bootstrap 3.4.1, if hide popover by .popover('hide') and click to show, popover internal treat it is already shown and dispatch hidden event immediately without popover anything.
                    $(this).popover('toggle');
                } else {
                    $(this).attr('popover-show', '0');
                }
            });
            $('html').on('click', function (e) {
                if (typeof $(e.target).data('original-title') == 'undefined'
                    && typeof $(e.target).parent().data('original-title') == 'undefined'
                    && !$(e.target).parents().is('.popover.in')) {
                    $('[data-rel="popover"][popover-show="1"]').popover('hide');
                }
            });

Upvotes: 0

mattdlockyer
mattdlockyer

Reputation: 7314

Update: A slightly more robust solution: http://jsfiddle.net/mattdlockyer/C5GBU/72/

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');
    }
});

For buttons containing icons use (this code has a bug in Bootstrap 3.3.6, see the fix below in this answer)

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

For JS Generated Popovers Use '[data-original-title]' in place of '[data-toggle="popover"]'

Caveat: The solution above allows multiple popovers to be open at once.

One popover at a time please:

Update: Bootstrap 3.0.x, see code or fiddle http://jsfiddle.net/mattdlockyer/C5GBU/2/

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

This handles closing of popovers already open and not clicked on or their links have not been clicked.

Update: Bootstrap 3.3.6, see fiddle

Fixes issue where after closing, takes 2 clicks to re-open

$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {                
            (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
        }

    });
});

Update: Using the conditional of the previous improvement, this solution was achieved. Fix the problem of double click and ghost popover: 

$(document).on("shown.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','1');
});
$(document).on("hidden.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','0');
});
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            if($(this).attr('someattr')=="1"){
                $(this).popover("toggle");
            }
        }
    });
});

Upvotes: 482

L N
L N

Reputation: 41

This solution works fine :

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

$("body")   .on('click'     ,'.popover' , function(e) { 
     e.stopPropagation();
});

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

Upvotes: 4

jakobinn
jakobinn

Reputation: 2032

I found a good and simple solution to this problem. Doing it this way, we only have an event listener activated when it needs to be. Furthermore we don't have a problem with the popover not appearing because an event disarming the popup is firing at the same time.

Add the popover to the HTML

   <input id="popoverId" type="text" data-toggle="popover" data-trigger="manual" data-content="Popover content">

Show the popover when you want.

$('#popoverId').popover('show');

Add this listener to your Javascript. This listener will fire as soon as the popover is shown and will attach a listener to the body which will hide the popover when the user clicks anywhere on the body of the page and then remove the event listener until the popover will be shown again.

$('#popoverId').on('shown.bs.popover', function () {
    $('body').click(function () {
        $('#popoverId').popover('hide');
        $('body').off();
    });
});

Upvotes: 0

user28490
user28490

Reputation: 1037

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

This closes all popovers if you click anywhere except on a popover

UPDATE for Bootstrap 4.1

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});

Upvotes: 87

Ahmed Damasy
Ahmed Damasy

Reputation: 701

I've tried many of the previous answers, really nothing works for me but this solution did:

https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

They recommend to use anchor tag not button and take care of role="button" + data-trigger="focus" + tabindex="0" attributes.

Ex:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" 
data-trigger="focus" title="Dismissible popover" data-content="amazing content">
Dismissible popover</a>

Upvotes: 2

siraj k
siraj k

Reputation: 117

simply add this attribute with the element

data-trigger="focus"

Upvotes: 9

Niklas Hantke
Niklas Hantke

Reputation: 363

There's an issue with the latest update of the accepted answer: If you have some tooltips enabled and you open a popover and then click on a tooltip-having element, the text of the tooltip will be displayed as a popover to.

To prevent this, just add

 if ($(this).data('bs.popover')) {

inside the if-statement (or add it concatenated with && to the if-statement)

// only show one popover at the time and hide on clicking outside
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            if ($(this).data('bs.popover')) {
                (($(this).popover('hide').data('bs.popover') || {}).inState || {}).click = false  // fix for BS 3.3.6
            }
        }
    });
});

Upvotes: 0

Pradeep
Pradeep

Reputation: 21

$(document).on('click', function(e) {
  $('[data-toggle="popover"]').each(function() {
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
      $(this).popover('hide').data('bs.popover').inState.click = false
    }

  });
});

Upvotes: 0

Nik
Nik

Reputation: 41

this solution gets rid of the pesky 2nd click when showing the popover for the second time

tested with with Bootstrap v3.3.7

$('body').on('click', function (e) {
    $('.popover').each(function () {
        var popover = $(this).data('bs.popover');
        if (!popover.$element.is(e.target)) {
            popover.inState.click = false;
            popover.hide();                
        }
    });
});

Upvotes: 2

amxa
amxa

Reputation: 1267

$("body").find('.popover').removeClass('in');

Upvotes: -2

Tanner Perrien
Tanner Perrien

Reputation: 3133

Bootstrap natively supports this:

JS Bin Demo

Specific markup required for dismiss-on-next-click

For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include the role="button" and tabindex attributes.

Upvotes: 2

Sungwook Ji
Sungwook Ji

Reputation: 11

tested with 3.3.6 and second click is ok

        $('[data-toggle="popover"]').popover()
            .click(function () {
            $(this).popover('toggle');
        });;

        $(document).on('click', function (e) {
            $('[data-toggle="popover"]').each(function () {
                //the 'is' for buttons that trigger popups
                //the 'has' for icons within a button that triggers a popup
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });

Upvotes: 1

swang
swang

Reputation: 5249

The answer works very well, just to add a angular directive in case you are using angular like me:

app.directive('popover', ['$document', function($document) {
    return {
        restrict: 'EA',
        link: function(scope, elem, attrs) {
            $(document).ready(function() {
                $('[data-toggle="popover"]').popover();
            });

            elem.bind('click', function(e) {
                $('#notification').popover('toggle');
            })

            $('body').on('click', function (e) {
                //the 'is' for buttons that trigger popups
                //the 'has' for icons within a button that triggers a popup
                if (!elem.is(e.target)
                    && elem.has(e.target).length === 0
                    && $('.popover').has(e.target).length === 0) {
                    elem.popover('hide');
                }
            });
        }
    };
}]);

The html code:

<a popover tabindex="0" role="button"
   id="notification"
   data-toggle="popover" data-trigger="manual"
   data-container="body" data-placement="bottom"
   data-content="This is a popover">
   Popover button
</a>

It should have been as simple as use data-trigger='click focus', because according to bootstrap:

How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.

However, use click and focus together doesn't work for me for unknown reason, instead I have to toggle it manually.

Upvotes: 0

Chisom Daniel Mba
Chisom Daniel Mba

Reputation: 31

Modified accepted solution. What I've experienced was that after some popovers were hidden, they would have to be clicked twice to show up again. Here's what I did to ensure that popover('hide') wasn't being called on already hidden popovers.

$('body').on('click', function (e) {
    $('[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var popoverElement = $(this).data('bs.popover').tip();
            var popoverWasVisible = popoverElement.is(':visible');

            if (popoverWasVisible) {
                $(this).popover('hide');
                $(this).click(); // double clicking required to reshow the popover if it was open, so perform one click now
            }
        }
    });
});

Upvotes: 3

Anton Sergeyev
Anton Sergeyev

Reputation: 979

None of supposed high-voted solutions worked for me correctly. Each leads to a bug when after opening and closing (by clicking on other elements) the popover for the first time, it doesn't open again, until you make two clicks on the triggering link instead of one.

So i modified it slightly:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})

Upvotes: 23

Jozef Kemenik
Jozef Kemenik

Reputation: 29

$('html').on('click.popover', function (e) {
    var allpopins = $('.popover.in');
    if (allpopins.has(e.target).length > 0 &&
        !$('.btn', allpopins).is(e.target))
        return;
    // recognise pop-up 
    var id = $(e.target).attr('aria-describedby');
    var popin = $("#" + id);
    //on any button click in entire pop-up hide this pop-ups
    $(popin).on(".btn", function () { popin.remove(); });
    // on any place out of entire popup hide all pop-ups 
    $('.popover.in').not(popin).remove();
});

This is my the best performance solution. Cheers.

Upvotes: 0

dbinott
dbinott

Reputation: 911

The answer from @guya works, unless you have something like a datepicker or timepicker in the popover. To fix that, this is what I have done.

if (typeof $(e.target).data('original-title') === 'undefined' && 
    !$(e.target).parents().is('.popover.in')) {
        var x = $(this).parents().context;
        if(!$(x).hasClass("datepicker") && !$(x).hasClass("ui-timepicker-wrapper")){
            $('[data-original-title]').popover('hide');
        }
}

Upvotes: 1

kernel
kernel

Reputation: 3743

We found out we had an issue with the solution from @mattdlockyer (thanks for the solution!). When using the selector property for the popover constructor like this...

$(document.body').popover({selector: '[data-toggle=popover]'});

...the proposed solution for BS3 won't work. Instead it creates a second popover instance local to its $(this). Here is our solution to prevent that:

$(document.body).on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var bsPopover = $(this).data('bs.popover'); // Here's where the magic happens
            if (bsPopover) bsPopover.hide();
        }
    });
});

As mentioned the $(this).popover('hide'); will create a second instance due to the delegated listener. The solution provided only hides popovers which are already instanciated.

I hope I could save you guys some time.

Upvotes: 2

Vladimir Dimchev
Vladimir Dimchev

Reputation: 219

It seems the 'hide' method does not work if you create the popover with selector delegation, instead 'destroy' must be used.

I made it work like that:

$('body').popover({
    selector: '[data-toggle="popover"]'
});

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('destroy');
        }
    });
});

JSfiddle here

Upvotes: 2

bryanjj
bryanjj

Reputation: 1

I was having issues with mattdlockyer's solution because I was setting up popover links dynamically using code like this:

$('body').popover({
        selector : '[rel="popover"]'
});

So I had to modify it like so. It fixed a lot of issues for me:

$('html').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
        $(this).popover('destroy');
    }
  });
});

Remember that destroy gets rid of the element, so the selector part is important on initializing the popovers.

Upvotes: 0

effe
effe

Reputation: 1365

According to http://getbootstrap.com/javascript/#popovers, 

<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>

Use the focus trigger to dismiss popovers on the next click that the user makes.

$('.popover-dismiss').popover({
    trigger: 'focus'
})

Upvotes: 5

Rakesh Vadnal
Rakesh Vadnal

Reputation: 985

Try this, this will hide by clicking outside.

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
    $(this).popover('hide');
    }
    });
});

Upvotes: 0

user14174
user14174

Reputation: 1

Taking Matt Lockyer's code, I've done a simple reset so the dom doesn't get covered by the element on hide.

Matt's code: http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

Fiddle: http://jsfiddle.net/mrsmith/Wd2qS/

    $('body').on('click', function (e) {
    //hide popover from dom to prevent covering elements
    $('.popover').css('display', 'none');
    //bring popover back if trigger element is clicked
    $('[data-toggle="popover"]').each(function () {
        if ($(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $('.popover').css('display', 'block');
        }
    });
    //hide popover with .popover method
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

Upvotes: 0

andrearonsen
andrearonsen

Reputation: 19

I just remove other active popovers before the new popover is shown (bootstrap 3):

$(".my-popover").popover();

$(".my-popover").on('show.bs.popover',function () {
    $('.popover.in').remove();
});

Upvotes: 1

Adi Nistor
Adi Nistor

Reputation: 112

I came up with this: My scenario included more popovers on the same page, and hiding them just made them invisible and because of that, clicking on items behind the popover was not possible. The idea is to mark the specific popover-link as 'active' and then you can simply 'toggle' the active popover. Doing so will close the popover completely $('.popover-link').popover({ html : true, container: 'body' })

$('.popover-link').popover().on 'shown.bs.popover', ->
  $(this).addClass('toggled')

$('.popover-link').popover().on 'hidden.bs.popover', ->
  $(this).removeClass('toggled')

$("body").on "click", (e) ->
  $openedPopoverLink = $(".popover-link.toggled")
  if $openedPopoverLink.has(e.target).length == 0
    $openedPopoverLink.popover "toggle"
    $openedPopoverLink.removeClass "toggled"

Upvotes: 1

Related Questions