CODEWITHSUNDEEP
jquerytwitter-bootstrapfocuspopover
Filippo oretti
Filippo oretti

Reputation: 49843

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

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?

Upvotes: 14

Views: 39272

Answers (6)

Sean Bradley
Sean Bradley

Reputation: 3577

Calling 

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

will close all currently opened popovers.

Upvotes: 3

Samuel
Samuel

Reputation: 1431

Being very simplistic:

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

Upvotes: 10

Kimi Chiu
Kimi Chiu

Reputation: 2173

Maybe you could try this:

        // Part 1: initialize the popver
        var button = template.find(".itemInfo button");
        // add a class name to identify the target later.
        button.addClass("popover-toggle");

        var content = $("<div>test</div>");

        button.popover({
            container:"body",
            content: content,
            html:true,
            placement:"top",
            title:"Popover title",
            trigger:'click'
        });

        // Part 2: add click event listener 
        $(document).on("click", function(event){
            var target = $(event.target);
            $.each( $(".popover-toggle"), function(index, value){
                var _target = $(value);
                // not click on the button and not click on the popover it self
                if( !target.is( _target ) && target.closest(".popover").length == 0 ){
                    _target.popover("hide");
                }
            });
        });

Not the best practice but it works fine on both Chrome and FF.

Upvotes: 0

mynameistechno
mynameistechno

Reputation: 3543

Here's a slightly more generic approach that requires just one handler and works for all popovers where the toggle/link contains attribute data-rel="popover", e.g.:

HTML

<a href="#" data-rel="popover">toggle</a>

JS

  $(document).on('click', function(event) {
    var $clicked = $(event.target);

    if ($clicked.closest('[data-rel="popover"]').length) {
      return;
    } else if ($clicked.closest('.popover').length) {
      event.stopPropagation();
    } else {
      $('[data-rel="popover"]').popover('hide');
    }
  });

Upvotes: 0

Jose Browne
Jose Browne

Reputation: 4622

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

Upvotes: 8

joeltine
joeltine

Reputation: 1630

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

Upvotes: 27

Related Questions