popover: close pop over when clicked outside of pop over

Question

I'm using bootstrap v2.2.2. I've tried a few other methods (namely: close popover outside popover but inside stay open and How to dismiss a Twitter Bootstrap popover by clicking outside? also tried Boot strapX clickover plugin: https://stackoverflow.com/a/11029479/1043817) But I cannot get it working via those methods.

I've created a JSFiddle with the way I have the code being used on my page: http://jsfiddle.net/FYNLL/ (Though I am using v2.2.2, The JSFiddle is using JS from v2.0.2. I think there are some differences in these version. When I use v2.2.2 locally, popover isn't displayed until I've clicked on the link. In the JSFiddle it is being displayed on hover. To be clear I want it displayed after a link has been clicked, not on hover)

What I am trying to accomplish is to hide the popover whenever an area outside of the popover is clicked. If another popover link is clicked I'd like the first popover to close and the one being clicked on to open.

Also this isn't absolutely necessary but I cannot get popover to work when it is in the .js file (I've tried using .each()). I'd really like to get rid of <script> $(function () { $("a[rel=popover]").popover(); });</script> from my HTML files. Again, this isn't really a priority.

In JavaScript, to my knowledge, you cannot handle an even called "Jimmy clicked somewhere other than X". There always has to be a click target. Also, the click target may call `stopPropagation` and prevent the click from bubbling to window, so you can't bind the click handler to window and think that'd work. I think the best you can do is pass the {trigger: 'click'} option, and make it activate on click. It will be closed when user clicks anywhere, which I think is due to blur event on the anchor. The fiddle also gets rid of — , Jan 08 '13 at 00:06

score 7 · Answer 1 · answered May 09 '13 at 07:07

7

// Universal Popupover Outside Click Close Method :)
jQuery(document).mouseup(function(e){ 
    var popocontainer = jQuery(".popover");
    if (popocontainer.has(e.target).length === 0){
        jQuery('.popover').toggleClass('in').remove();
    }
});

answered May 09 '13 at 07:07

sndp

71
1
2

Worked for me. Would this remove all popovers if multiple were present? – Ethereal May 23 '13 at 19:11
Best solution i found after searchin for hours on google and SO. Kudos to you! – Maximilian Stroh May 28 '13 at 19:57

score 0 · Answer 2 · answered Jan 08 '13 at 00:07

0

Listen to a click event that bubbles up to the document and determine if it's target was inside of a popover. If not, then hide it:

var popover = $('#someEl').popover(options);

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

   if(src.hasClass('popover') || src.closest('popover').length) {
     $('#someEl').popover('hide');
   }
});

answered Jan 08 '13 at 00:07

Adam Jenkins

51,445
11
72
100

How do you handle a case where some other element prevents bubbling? – Jan 08 '13 at 00:21
As you correctly pointed out in your comment above, you can't, there's nothing you can do if some element has return false or stopPropagation() called inside it's event handler. The code that I posted is not perfect, but it is the best that you can do. – Adam Jenkins Jan 08 '13 at 00:48
@bvukelic What do you mean by bubbling? – Zaki Aziz Jan 08 '13 at 01:11
Simplified, when an event is triggered on a DOM element, it propagates to all its parent elements up the tree, all the way to document's root. That's called bubbling. Ideally, if you want to test if something other than X was clicked, you'd check if the click was propagated to root. However, elements can prevent bubbling. http://en.wikipedia.org/wiki/DOM_Events#Event_flow – Jan 08 '13 at 01:14
@adam, just tried this. Does not seem to work for me. When I click the links the popover doesn't show at all. – Zaki Aziz Jan 11 '13 at 22:20

score -1 · Answer 3 · answered Jan 08 '13 at 00:01

Solutions are all provided in the API. http://twitter.github.com/bootstrap/javascript.html#popovers

Look at options/trigger and methods: .popover('hide')

As for not running from script file, there is no reason it shouldn't if you have code wrapped in ready handler and your script file is loaded after bootstrap.js. Use browser console to check for errors

popover: close pop over when clicked outside of pop over

3 Answers3

Linked