Menu
The following Bootstrap code gives me "sticky" popover (so users can interact with the content inside the popover). The issue is that when a popover is opened, other popovers should be closed (hidden). Any idea how I can implement this?
$("[rel=popover]").popover({placement:'bottom', trigger:'manual'}).hover(function(){
$(this).popover('show');
e.preventDefault();
});
925
The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content. Click To Toggle Popover Click To Toggle Popover.
A Bootstrap Popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed with a click of a mouse pointer over that element.
There's a very simple solution here (not my solution, but works beautifully):
$('.link-popover').click(function(){
$('.link-popover').not(this).popover('hide'); //all but this
});
As per the bootstrap docs: Use the focus trigger to dismiss popovers on the next click that the user makes.
<a href="#" 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
