Close bootstrap popover when clicking outside

Question

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.

The HTML that you provided is only what you have to put in your DOM. Additional elements get created when the popover actually gets generated. Use your developer tools in the browser of your choice, and find what that element is that gets created as your "background" and put a listener in for that. — krillgar, Jun 09 '16 at 17:49
Seems like people are copying answers from: http://stackoverflow.com/questions/11703093/how-to-dismiss-a-twitter-bootstrap-popover-by-clicking-outside — epascarello, Jun 09 '16 at 17:53
I tried to hide .popover class but not resolved the problem ! `$('body').on('click', function (e) { $(".popover").hide(); });` — Mac Ben, Jun 09 '16 at 17:57
I think I have the solution for you. Please check my edited answer again. — Kyle Pastor, Jun 09 '16 at 19:40
Problem not solved yet ! when i click on the content of the popover nothing work. — Mac Ben, Jun 10 '16 at 11:21
Hi Mac Ben, Right now my example will let you create the popover, and whenever you click anywhere but the popover it will disappear. If you click the popover it will not disappear. This was the question correct? — Kyle Pastor, Jun 10 '16 at 13:28
No, the question is like mentionned in the title ! when you click outside of the popover this one will disappear, but if you click in, will not disappear ! in your first example you given a solution for a text popover, your second example popover disappear whenever you click, the third and final example, nothing work if i click on the content (Popover disappear when i click on the title). — Mac Ben, Jun 10 '16 at 13:53
stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed. This not a solution since it disable any parent event. — Mac Ben, Jun 10 '16 at 13:55
What do you mean ? i am using popover's twitter bootstrap functionality. — Mac Ben, Jun 10 '16 at 16:28
Yes bit within the popover you are not specifying any functionality. Therefore when you click it noting will happen. — Kyle Pastor, Jun 10 '16 at 19:49
Anywhy, the popover i want it like it is, but the only problem is the one i posted here :) thank you for your efforts, hope someone can solve it. — Mac Ben, Jun 11 '16 at 15:08

score 1 · Answer 1 · answered Jun 09 '16 at 17:37

1

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

answered Jun 09 '16 at 17:37

Hector Barbossa

5,506
13
48
70

This not work for html example (Your code will work for simple popover), already tried it before i ask this question, anywhy thank's. – Mac Ben Jun 09 '16 at 17:39

score 0 · Answer 2 · edited Aug 03 '18 at 19:54

0

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

edited Aug 03 '18 at 19:54

Rick

4,030
9
24
35

answered Jun 09 '16 at 17:38

Kyle Pastor

489
4
8

Please read my question ! (My example is an HTML popover and not simple one - text). – Mac Ben Jun 09 '16 at 17:40
The update not solved the problem since when i click on the popover this one will disappear ... i need it to disappear only when clicking outside. – Mac Ben Jun 09 '16 at 17:59

score 0 · Answer 3 · answered Jun 13 '21 at 12:36

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
    }

});

});

If this is a duplicate flag as duplicate – Sfili_81 Jun 14 '21 at 11:43 — Sfili_81, Jun 14 '21 at 11:43

Close bootstrap popover when clicking outside

3 Answers3