Show one popover and hide other popovers

Question

i have several buttons and i need a popover for each.
i want it like this:
when my user click on one of them, i want others to be hidden. so only one popover is show

Answer 1

<ul>
<li><i class="fa fa-trash-o DeleteRow" id=""></i>1</li>
<li><i class="fa fa-trash-o DeleteRow" id=""></i>2</li>
<li><i class="fa fa-trash-o DeleteRow" id=""></i>3</li>
</ul>

// Close other popover when click on Delete/Open new popover - START //
     $('.DeleteRow').on('click', function (e) {
        $('.popover').not(this).popover('hide');
     });
 // Close other popover when click on Delete/Open new popover - END//

Answer 2

The easiest way to do this is to set trigger="focus" in your popover

Dismiss on next click

Use the focus trigger to dismiss popovers on the next click that the user makes.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Note - this will mean the popover will hide as soon as you click off of it

Answer 3

This is a quick generic solution that I'm using where you don't need to know what the classes are of the popovers in advance. I haven't tested it super extensively. Also I'm using toggle below as I had some problems with the hide behaving quite differently than the toggle.

  var $currentPopover = null;
  $(document).on('shown.bs.popover', function (ev) {
    var $target = $(ev.target);
    if ($currentPopover && ($currentPopover.get(0) != $target.get(0))) {
      $currentPopover.popover('toggle');
    }
    $currentPopover = $target;
  });

  $(document).on('hidden.bs.popover', function (ev) {
    var $target = $(ev.target);
    if ($currentPopover && ($currentPopover.get(0) == $target.get(0))) {
      $currentPopover = null;
    }
  });

Answer 4

This is the simplest and elegant way to do this:

    $('[data-toggle="popover"]').on('click', function(){
        $('[data-toggle="popover"]').not(this).popover('hide');
    });

Answer 5

Here's a solution that worked for me. In my scripts I don't pass vars through the data attribute in the HTML, I prefer the logic in my js files.

            $(".vote").popover({
                trigger: " click",
                title: "Attention",
                content: "You must be a member of the site to vote on answers.",
                placement: 'right'
            });

            $('.vote').on('click', function (e) {
                $('.vote').not(this).popover('hide');
            });

Answer 6

somehow i created one example for my need. i used this code:

$('.btn').popover();

$('.btn').on('click', function (e) {
    $('.btn').not(this).popover('hide');
});

check the demo here

and corrected the previous demo i hope it will help someone else