jQuery - Twitter Bootstrap - close all popovers on body's any elements focus

Question

I'm trying closing any popover is opened when any body element (not the popover itself) is focused,

so i do:

 $(document.body).on('focus focusout focusin', function(e) {
  if( e.target.classList.contains('popover') ){return false;}
  else{
    $('*').popover('hide');
  }
  // code to close the popover
});

this works great on Chrome but not on FF, on FF i need to focusin and focusout before the popover is closed.

here is my example working only for chrome: http://jsfiddle.net/CU5U5/4/

How can i fix this?

Solution 1

An alternative:

$(document).on('focus', ':not(.popover)', function(){
    $('.popover').popover('hide');
});

Edit:

So as it turns out, my above answer is incorrect. You need to call .popover('hide') on the element the popover was instantiated on... not the .popover itself. AND you need to stop propagation of the click event on the link (i.e., return false in click handler) so it doesn't bubble up to the document root. See this for an answer, http://jsfiddle.net/aFacG/1/.

HTML

<a data-content="a popover" id="mypopover" href="#">click me</a>

JS

$(document).ready(function(){
  $("#mypopover").popover();

  $(document).on('click', function(){
      $("#mypopover").popover('hide');
  });

  $('#mypopover').click(function(){
      return false;
  });
});

Solution 2

The problem with the current accepted answer is that popover hides even when you click inside the tooltip (bad if you have an element you want to interact with inside the popover..like an input field).

Use the stopPropagation method on your popover container to prevent the hide event from bubbling up the DOM.

UPDATE(bootstrap url changed):http://jsfiddle.net/bNvX7/10/

$(document).ready(function(){

    //Initialize popover on element
    $("#mypopover").popover();

    //Attach click handler to document
    $(document).bind('click', function (e) {
        $("#mypopover").popover('hide');
    });

    //Dont hide when I click anything inside #container
    $('#container').bind('click', function(e) {
        e.stopPropagation();
    });
});

Solution 3

Being very simplistic:

$('.popover').remove();

Solution 4

Calling

$('.popover').popover('hide');

will close all currently opened popovers.

View more solutions

Comments

[Naftali]

This should work perfectly @Badaboooooom it is better than my answer! +1

[rlemon]

provide a example of your code failing. This code should work and if it is not that means your question does not contain enough information. jsfiddle.net if possible use this (or similar tool)

[itsme]

with this i can't get the popover to hide, i focused on any element on the body , it doesn't hides neither on FF and CH :(

[joeltine]

It's possible instead of "focus" you should try just using a "click" event... ? This would mean if someone clicks anywhere else on the page EXCEPT a popover, it will close all popovers.

[Naftali]

@Badaboooooom please heed rlemon's words... we need a demo of this not working...

[itsme]

@joeltine tryed with no results

[joeltine]

Ok, I've actually figured it out... when you do .popover('hide') it has to be on the element you instantiated the popover on, not the actual .popover element that gets generated. Also, you have to prevent event bubbling on the anchor tag itself (stopPropagation). See the fiddle: jsfiddle.net/aFacG/1

[Jose Browne]

I just had to solve this problem myself.. so figured it would be great to add to this discussion.

[Sibtain Norain]

I've followed the above example and it works fine for me but there is one issue that when I click on the element for the first time, the popover doesn't appear and if click the same element second time, the popover appears. anyone faced similar issue?

[happysailingdude]

This seems like such an elegant solution (that worked for me) - could anyone please elaborate as to what this solution does (as I'm concerned it may prevent future popovers working in the page). Thank you