Show one popover and hide other popovers
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
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
None of the answers I saw previously had dynamic popovers, so this is what I came up with. As some have pointed out, there are issues with popovers causing problems if they aren't removed from the DOM using .remove()
. I forked an example from the bootstrap website and created this new fiddle. Dynamic popovers are added using the selector: '[rel=popover]'
option. When a popover is about to be shown, I call destroy on all the other popovers, then remove the .popover
content from the page.
$('body').popover({
selector: '[rel=popover]',
trigger: "click"
}).on("show.bs.popover", function(e){
// hide all other popovers
$("[rel=popover]").not(e.target).popover("destroy");
$(".popover").remove();
});