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 shown
check and help me correcting this example plz:

var mycontent='<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>' 

$('.btn').popover({     html: true,     content:mycontent,     trigger: 'manual' }).click(function(e) {     $(this).popover('toggle');     e.stopPropagation(); });  $('html').click(function(e) {      $('.btn').popover('hide'); }); 

my html:

<ul>     <li>         <a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a>     </li>     <li>        <a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a>      </li> </ul> 

jsfiddle example

adding something like the code bellow solved my problem somehow:

$('.btn').click(function(e) {      $('.btn').popover('hide'); }); 

but by clicking twice on each button it goes wrong

Answer 1

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