CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Mac Ben
Mac Ben

Reputation: 43

Close bootstrap popover when clicking outside

Similar question already asked but not for this example.

Here we have the code for the popover:

HTML:

<a href="#" class="popover_test">Popover Example</a>
<!-- POPOVER -->
<div id="content" class="hidden">
  Contents
</div>
<div id="title" class="hidden">
  Title
</div>

Javascript:

$(".popover_test").popover({
    html : true, 
    content: function() {
      return $("#content").html();
    },
    title: function() {
      return $("#title").html();
    }
});

What is the approch in order to disappear it when i click outside of the popover ?

Here a JSFIDDLE to test it online: https://jsfiddle.net/C5GBU/1772/

$(".popover_test").popover({
    html : true, 
    content: function() {
      return $("#content").html();
    },
    title: function() {
      return $("#title").html();
    }
});
.hidden {
  display: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<a href="#" class="popover_test">Popover Example</a>
<!-- POPOVER -->
<div id="content" class="hidden">
  Contents
</div>
<div id="title" class="hidden">
  Title
</div>

Thank's.

Upvotes: 1

Views: 4692

Answers (3)

Kumara
Kumara

Reputation: 47

Answer can be found on 11703093

$(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
    }

});

});

Upvotes: 0

Kyle Pastor
Kyle Pastor

Reputation: 539

Once again I have made an edit: https://jsfiddle.net/C5GBU/1775/

$(".popover_test").popover({
  html: true,
  content: function() {
    return $("#content").html();
  },
  title: function() {
    return $("#title").html();
  }
}).on('click', function(e) {
  $('.popover-content').click(function(e) {
    e.stopPropagation();
  })
});

$('body').on('click', function(e) {
  $('.popover_test').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_test').has(e.target).length === 0) {
      $(this).popover('hide');
    }
  });
});

Please let me know if this works

Upvotes: 0

Hector Barbossa
Hector Barbossa

Reputation: 5528

Check the following code -

$('[data-toggle="popover"]').popover();

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

Upvotes: 1

Related Questions