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

I was having some difficulty using any of the answers posted to solve this issue using bootstrap v3. After some searching I found my primary issue was not setting the proper popover trigger. It should be set as 'manual' as listed in the op's question.

The next step was very simple and gives some better behavior than the solutions I see in the other answers so I thought I would share.

$('html').on('click', function(e) {
  if($(e.target).hasClass('btn')) {
    $(e.target).popover('toggle');
  }

  if(!$(e.target).parent().hasClass('popover')) {
    $('.popover').prev('.btn').not(e.target).popover('toggle');
  }
});

This solution gives you the ability to dismiss the popover upon clicking anywhere else on the page including another popover link but allows you to click on the popover itself without dismissing it so that the popover can be accessed by the user for things like copy pasting text.

Hope this helps someone, here is a working fiddle. https://jsfiddle.net/hL0pvaty/

p.s. - I am only using the .btn class as the selector in my example because it is used in the op's question. I would recommend using something less generic.