How can I close a Twitter Bootstrap popover with a click from anywhere else on the page

Question

I m currently using popovers with Twitter Bootstrap  initiated like this       popup-marker   popover           html  true          trigger   manual         click function e              this  popover  toggle            e preventDefault              As you can see  they re triggered manually  and clicking on  popup-marker  which is a div with a background image  toggles a popover  This works great  but I d like to also be able to close the popover with a click anywhere else on the page  but not on the popover itself     I ve tried a few different things  including the following  but with no results to show for it      body   click function e            popup-marker   popover  hide          How can I close the popover with a click anywhere else on the page  but not with a click onthe popover itself

User · Answer

The accepted solution gave me some issues (clicking on the '.popup-marker' element of the opened popover made the popovers not work afterwards). I came up with this other solution that works perfectly for me and it's quite simple (I'm using Bootstrap 2.3.1):

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
}).click(function(e) {
    $('.popup-marker').not(this).popover('hide');
    $(this).popover('toggle');
});
$(document).click(function(e) {
    if (!$(e.target).is('.popup-marker, .popover-title, .popover-content')) {
        $('.popup-marker').popover('hide');
    }
});

UPDATE: This code works with Bootstrap 3 as well!

User · Answer

Even though there are a lot of solutions here  i d like to propose mine as well  i don t know if there is some solution up there that solves it all  but i tried 3 of them and they had issues  like clicking on the popover it self makes it hide  others that if i had another popover buttons clicked both multiple popovers would still appear  like in the selected solution   How ever  This one fixed it all  var curr popover btn   null     Hide popovers function function hide popovers e        var container       popover in        if   container is e target     if the target of the click isn t the container             amp  amp  container has e target  length     0         nor a descendant of the container               if  curr popover btn    null                           curr popover btn  popover  hide                curr popover btn   null                    container hide               Hide popovers when out of focus    html   click function e        hide popovers e           popover-marker   popover       trigger   manual     click function e        hide popovers e       var  popover btns       popover-marker        curr popover btn   this      var  other popover btns   jQuery grep    popover btns   function popover btn                   return   popover btn     curr popover btn                           other popover btns  popover  hide          this  popover  toggle        e stopPropagation

User · Answer

This should work in Bootstrap 4    x000D   x000D      my-popover-trigger   popover   x000D    template    lt div class  popover my-popover-content  role  tooltip  gt  lt div class  arrow  gt  lt  div gt  lt div class  popover-body  gt  lt  div gt  lt  div gt    x000D    trigger   manual  x000D     x000D   x000D    document  click function e    x000D    if    e target  closest     my-popover-trigger    length  gt  0    x000D          my-popover-trigger   popover  toggle   x000D      else if     e target  closest     my-popover-content    length  gt  0    x000D          my-popover-trigger   popover  hide   x000D      x000D     x000D   x000D   x000D    Explanation    The first section inits the popover as per the docs  https   getbootstrap com docs 4 0 components popovers  The first  if  in the second section checks whether the clicked element is a descendant of  my-popover-trigger  If that is true  it toggles the popover  it handles the click on the trigger   The second  if  in the second section checks whether the clicked element is a descendant of the popover content class which was defined in the init template  If it is not this means that the click was not inside the popover content  and the popover can be hidden

User · Answer

This one works like a charm and I use it   It will open the popover when you click and if you click again it will close  also if you click outside of the popover the popover will be closed   This also works with more than 1 popover       function hideAllPopovers            data-toggle  popover     each function             if    this  data  showing       true                  this  data  showing    false                  this  popover  hide                                            data-toggle  popover     each function               this  popover               html  true              trigger   manual             click function e                if    this  data  showing        true                    hideAllPopovers                      this  data  showing    true                      this  popover  show                 else                  hideAllPopovers                              e stopPropagation                       document  click function e        hideAllPopovers

User · Answer

All of the existing answers are fairly weak  as they rely on capturing all document events then finding active popovers  or modifying the call to  popover     A much better approach is to listen for show bs popover events on the document s body then react accordingly  Below is code which will close popovers when the document is clicked or esc is pressed  only binding event listeners when popovers are shown   function closePopoversOnDocumentEvents       var visiblePopovers          var  body      body       function hideVisiblePopovers           each visiblePopovers  function             this  popover  hide                   function onBodyClick event        if  event isDefaultPrevented          return       var  target     event target       if   target data  bs popover          return       if   target parents   popover   length        return       hideVisiblePopovers           function onBodyKeyup event        if  event isDefaultPrevented          return       if  event keyCode    27     esc       return       hideVisiblePopovers        event preventDefault           function onPopoverShow event        if   visiblePopovers length           body on  click   onBodyClick          body on  keyup   onBodyKeyup             visiblePopovers push event target          function onPopoverHide event        var target   event target      var index   visiblePopovers indexOf target       if  index  gt  -1          visiblePopovers splice index  1             if  visiblePopovers length    0           body off  click   onBodyClick          body off  keyup   onBodyKeyup                 body on  show bs popover   onPopoverShow      body on  hide bs popover   onPopoverHide

User · Answer

I found this to be a modified solution of pbaron s suggestion above  because his solution activated the popover  hide   on all elements with class  popup-marker    However  when you re using popover   for html content instead of the data-content  as I m doing below  any clicks inside that html popup actually activate the popover  hide    which promptly closes the window   This method below iterates through each  popup-marker element and discovers first if the parent is related to the  popup-marker s id that was clicked  and if so then does not hide it   All other divs are hidden               function                   html   click function e                       this is my departure from pbaron s code above                        popup-marker   popover  hide                        popup-marker   each function                         if    e target  parents   children   popup-marker   attr  id       this  attr  id                                 this  popover  hide                                                                               popup-marker   popover                   html  true                     this is where I m setting the html for content from a nearby hidden div with id  html-  clicked div id                 content  function     return     html-    this  attr  id    html                       trigger   manual                 click function e                      this  popover  toggle                    e stopPropagation

User · Answer

An even easier solution  just iterate through all popovers and hide if not this      document  on  click     popup-marker   function           this  popover  toggle         document  bind  click touchstart   function e        var target     e target  0           popup-marker   each function                 hide any open popovers except for the one we ve clicked         if     this  is target                   this  popover  hide

User · Answer

This is even easier        html   click function e            popup-marker   popover  hide             popup-marker   popover       html  true      trigger   manual     click function e          this  popover  toggle        e stopPropagation

User · Answer

Presuming that only one popover can be visible at any time  you can use a set of flags to mark when there s a popover visible  and only then hide them   If you set the event listener on the document body  it will trigger when you click the element marked with  popup-marker   So you ll have to call stopPropagation   on the event object  And apply the same trick when clicking on the popover itself   Below is a working JavaScript code that does this  It uses jQuery    1 7  jQuery function         var isVisible   false       var hideAllPopovers   function                popup-marker   each function                   this  popover  hide                                  popup-marker   popover           html  true          trigger   manual         on  click   function e               if any other popovers are visible  hide them         if isVisible                hideAllPopovers                         this  popover  show                handle clicking on the popover itself             popover   off  click   on  click   function e                e stopPropagation       prevent event for bubbling up   gt  will not get caught with document onclick                      isVisible   true          e stopPropagation                    document  on  click   function e            hideAllPopovers            isVisible   false                http   jsfiddle net AFffL 539   The only caveat is that you won t be able to open 2 popovers at the same time  But I think that would be confusing for the user  anyway  -

User · Answer

I had a similar need  and found this great little extension of the Twitter Bootstrap Popover by Lee Carmichael  called BootstrapX - clickover  He also has some usage examples here  Basically it will change the popover into an interactive component which will close when you click elsewhere on the page  or on a close button within the popover  This will also allow multiple popovers open at once and a bunch of other nice features   Plugin can be found here   Usage example   lt button rel  clickover  data-content  Show something here        lt button data-dismiss  clickover       gt Close Clickover lt  button gt    gt Show clickover lt  button gt    javascript       load click overs using  rel  attribute     rel  clickover     clickover

User · Answer

I was trying to make a simple solution for a simple issue  Above posts are good but so complicated for a simple issue  So i made a simple thing  Just added a close button  Its perfect for me                   popover-link   click function                        mypopover   hide                      this  parent   find   mypopover   show                           close   click function          this  parents   mypopover   css  display   none                      lt div class  popover-content  gt           lt i class  fa fa-times close  gt  lt  i gt       lt h3 class  popover-title  gt Title here lt  h3 gt  your other content here          lt  div gt        popover-content       position relative             close           position absolute          color  CCC          right 5px          top 5px          cursor pointer

User · Answer

jQuery   not  popup-marker    once   click function       jQuery   popup-marker   hide

User · Answer

RayOnAir  I have same issue with previous solutions  I come close to  RayOnAir solution too  One thing that improved is close already opened popover when click on other popover marker  So my code is   var clicked popover marker   null  var popover marker     pricing i      popover marker  popover     html  true    trigger   manual     click function  e      clicked popover marker   this       popover marker  not clicked popover marker  popover  hide        clicked popover marker  popover  toggle           document  click function  e      if  e target    clicked popover marker          popover marker  popover  hide        clicked popover marker   null

User · Answer

Here s my solution  for what it s worth      Listen for clicks or touches on the page    html   on  click popover data-api touchend popover data-api   function e          Loop through each popover on the page       data-toggle popover    each function             Hide this popover if it s visible and if the user clicked outside of it     if    this  next  div popover visible   length  amp  amp      popover   has e target  length     0            this  popover  hide

User · Answer

This question was also asked here and my answer provides not only a way to understand jQuery DOM traversal methods but 2 options for handling the closing of popovers by clicking outside   Open multiple popovers at once or one popover at a time   Plus these small code snippets can handle the closing of buttons containing icons   https   stackoverflow com a 14857326 1060487

User · Answer

read  Dismiss on next click  here http   getbootstrap com javascript  popovers  You can use the focus trigger to dismiss popovers on the next click  but you have to use use the  lt a gt  tag  not the  lt button gt  tag  and you also must include a tabindex attribute     Example    lt a href     tabindex  0  class  btn btn-lg btn-danger    data-toggle  popover  data-trigger  focus  title  Dismissible popover    data-content  And here s some amazing content  It s very engaging  Right   gt    Dismissible popover  lt  a gt

User · Answer

I would set the focus to the newly created pop-over and remove it on blur  That way it s not needed to check which element of the DOM has been clicked and the pop-over can be clicked  and selected too  it will not lose its focus and will not disappear   The code           popup-marker   popover          html  true         trigger   manual         click function e             this  popover  toggle              set the focus on the popover itself         jQuery   popover   attr  tabindex  -1  focus           e preventDefault                    live event  will delete the popover by clicking any part of the page        body   on  blur    popover  function               popup-marker   popover  hide

User · Answer

If you re trying to use twitter bootstrap popover with pjax  this worked for me   App Utils Popover        enableAll  function             pk-popover   popover                  trigger   click           html   true          container   body           placement   right                          bindDocumentClickEvent  function documentObj          documentObj  click function event          if     event target  hasClass  pk-popover                   pk-popover   popover  hide                               document  on  ready pjax end   function       App Utils Popover enableAll      App Utils Popover bindDocumentClickEvent this

User · Answer

Here is the solution which worked very fine for me  if it can help          Add the equals method to the jquery objects      fn equals   function compareTo      if   compareTo    this length     compareTo length        return false        for  var i   0  i  lt  this length    i        if  this i      compareTo i           return false              return true             Activate popover message for all concerned fields     var popoverOpened   null    function             span btn   popover           span btn   unbind  click           span btn   bind  click   function e            e stopPropagation            if   this  equals popoverOpened   return          if popoverOpened     null                popoverOpened popover  hide                                    this  popover  show            popoverOpened     this           e preventDefault                   document  click function e            if popoverOpened     null                popoverOpened popover  hide                   popoverOpened   null

User · Answer

I had some problem to get it working on bootstrap 2 3 2  But i sloved it this way     function          document  mouseup function  e            if      popover   length  gt  0   amp  amp     e target  hasClass  popInfo                      popover   each function                      this  prev   popInfo   popover  hide                                               popInfo   popover           trigger   click           html  true

User · Answer

popForm   popover         conteneurPopForm   on  click    fermePopover  function            popForm   trigger  click          To be clear  just trigger the popover

User · Answer

tweaked  David Wolever solution slightly   function closePopoversOnDocumentEvents       var visiblePopovers          var  body      body       function hideVisiblePopovers            this was giving problems and had a bit of overhead         each visiblePopovers  function               this  popover  hide                         while  visiblePopovers length     0             visiblePopovers pop    popover  hide                 function onBodyClick event        if  event isDefaultPrevented          return       var  target     event target       if   target data  bs popover          return       if   target parents   popover   length        return       hideVisiblePopovers           function onBodyKeyup event        if  event isDefaultPrevented          return       if  event keyCode    27     esc       return       hideVisiblePopovers        event preventDefault           function onPopoverShow event        if   visiblePopovers length           body on  click   onBodyClick          body on  keyup   onBodyKeyup             visiblePopovers push event target          function onPopoverHide event        var target   event target      var index   visiblePopovers indexOf target       if  index  gt  -1          visiblePopovers splice index  1             if  visiblePopovers length    0           body off  click   onBodyClick          body off  keyup   onBodyKeyup                 body on  show bs popover   onPopoverShow      body on  hide bs popover   onPopoverHide

User · Answer

Try data-trigger  focus  instead of  click     This solved the problem for me

User · Answer

For some reason none of the other solutions here worked for me  However  after a lot of troubleshooting  I finally arrived at this method which works perfectly  for me at least       html   click function e      if     e target  parents   hasClass  popover               popover parent   popover  destroy              In my case I was adding a popover to a table and absolutely positioning it above below the td that was clicked  The table selection was handled by jQuery-UI Selectable so I m not sure if that was interfering  However whenever I clicked inside the popover my click handler which targeted     popover   never worked and the event handling was always delegated to the   html  click handler  I m fairly new to JS so perhaps I m just missing something   Anyways I hope this helps someone

User · Answer

Another solution  it covered the problem I had with clicking descendants of the popover     document  mouseup function  e           The target is not popover or popover descendants     if       popover   is e target   amp  amp  0         popover   has e target  length                data-toggle popover    popover  hide

User · Answer

I like this  simple yet effective    var openPopup       data-toggle  popover     on  click  function        if openPopup             openPopup  popover  hide               openPopup this

User · Answer

I do it as below     a rel popover    click function event       if event which    1                    thisPopOver     this            thisPopOver popover  toggle             thisPopOver parent  li   click function event               event stopPropagation                   html   click function                     thisPopOver popover  hide                                            Hope this helps

User · Answer

Add btn-popover class to your popover button link that opens the popover  This code will close the popovers when clicking outside of it      body   on  click   function event      if     event target  closest   btn-popover   popover   length            popover   popover  hide

User · Answer

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   - gt      this  addClass  toggled        popover-link   popover   on  hidden bs popover   - gt      this  removeClass  toggled       body   on  click    e  - gt     openedPopoverLink       popover-link toggled     if  openedPopoverLink has e target  length    0      openedPopoverLink popover  toggle       openedPopoverLink removeClass  toggled

User · Answer

I give all my popovers anchors the class activate popover  I activate them all at once onload     body   popover  selector    activate-popover   html   true  container   body     to get the click away functionality working I use  in coffee script      document  on  click    e  - gt    clickedOnActivate      e target  parents   hasClass  activate-popover        e target  hasClass  activate-popover      clickedAway       e target  parents   hasClass  popover        e target  hasClass  popover    if clickedAway  amp  amp   clickedOnActivate       popover in   prev   popover  hide   if clickedOnActivate        popover in   prev   each    - gt      if    this  is   e target  closest   activate-popover            this  popover  hide       Which works perfectly fine with bootstrap 2 3 1

User · Answer

https   github com lecar-red bootstrapx-clickover  It s an extension of twitter bootstrap popover and will solve the problem very simply

[javascript] How can I close a Twitter Bootstrap popover with a click from anywhere (else) on the page?

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap