Show one popover and hide other popovers

ngbpopover close all popovers
bootstrap popover
uib-popover close programmatically
close uib-popover
bootstrap hide popover programmatically
popover css
bootstrap popover close
angular popover

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>'
    html: true,
    trigger: 'manual'
}).click(function(e) {

$('html').click(function(e) {

my html:

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

jsfiddle example

adding something like the code bellow solved my problem somehow:

$('.btn').click(function(e) {

but by clicking twice on each button it goes wrong

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


$('.btn').on('click', function (e) {

check the demo here

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

Twitter Bootstrap: Hide other popovers when one is open, I've been having a play about with this and there's a few other problems regarding triggering the manual show/hide to get this to play nicely. Hover is actually  .popover('hide') Covers an element's popover. Come back to the user before the popover has actually been disguised (i.e. before the event takes place). This is regarded a "manual" triggering of the popover.

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.

                selector: '[rel=popover]',
                trigger: "click"
            }).on("", function(e){
                // hide all other popovers

Show Only One Popover with Dynamic Popovers - JSFiddle, <p><a class="btn btn-lg btn-danger" rel="popover" data-title="Static" data-content​="This button was specified One-time initialization hide all other popovers. Bootstrap .popover() 'show' & 'destroy' not working properly. When I use the bootstrap popover in 'manual' mode 'destroy' and 'hide' not working properly. When I'm using hide and destroy, popover opacity changing to 0 but its not changing display to none, which resulting that the popover container cover the content bellow it.

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

close popover programmatically & only one popover open at the , Option to display only one popover at a time #749. Closed //Only do this for all popovers other than the current one that cause this event, if (! Presuming that only one popover can be visible at any time, you can use a set of flags to mark when there's a popover visible, and only then hide them. If you set the event listener on the document body, it will trigger when you click the element marked with 'popup-marker'. So you'll have to call stopPropagation() on the event object.

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('', function (ev) {
    var $target = $(;
    if ($currentPopover && ($currentPopover.get(0) != $target.get(0))) {
    $currentPopover = $target;

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

Popovers · Bootstrap, One way to initialize all popovers on a page would be to select them by their Delay showing and hiding the popover (ms) - does not apply to manual trigger  Popovers have never been easier than with this simple, four-ingredient recipe. Heat oven to 450°F. Generously grease 6-cup popover pan or six 6-ounce custard cups. Beat eggs slightly in medium bowl. Beat in remaining ingredients just until smooth (do not overbeat). Fill cups about 1/2 full. Reduce oven temperature to 350°F.

Using Bootstrap 3.3.7 I find this solution:

var _popoverLink = $('[data-toggle="popover"]');

_popoverLink.on('click', function(){
  _popoverLink.popover('destroy').popover({container: 'body'});


Follow Up Post: Hiding All But The Current Bootstrap Popover, Follow Up Post: Hiding All But The Current Bootstrap Popover would display different Bootstrap popovers with explanatory text and HTML. how he could use my technique but ensure that only one popover was open at  Combine all ingredients in a bowl; beat just until smooth. Pour into 4 greased 6-oz. custard cups; place on a baking sheet. Bake at 425° for 15 minutes. Reduce heat to 350° (do not open door). Bake 15-20 minutes longer or until popovers are deep golden brown (do not underbake). Serve warm.

How to Create Popovers with Bootstrap 4, Similarly, you can add popovers to the other elements such as links, icons, etc. Time to delay in showing and hiding the popover (ms) — does not apply to own custom template for the Bootstrap popovers instead of using the default one. This sets a event handler on the whole document and if it's not a popover element it will hide all popovers. Also, on the event (triggered prior to opening a popover) it will hide all others.

How to get a “popover” to close automatically when another one is , How to get a “popover” to close automatically when another one is opened in the Here is our HTML code, showing an ng-repeat directive generating various Before opening any popovers, set to “false” all array values. @fxck Looking at the tooltip code, I was able to achieve single popover functionality and also hide popover on click elsewhere in the body using the following code (I use jQuery as well).

Popovers - Bootstrap, One way to initialize all popovers on a page would be to select them by their Delay showing and hiding the popover (ms) - does not apply to manual trigger  Things to know when using the popover plugin: Popovers rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js in order for popovers to work! Popovers are opt-in for performance reasons, so you must initialize them yourself. Zero-length title and content values will never show a popover.

  • if there is something wrong with the way i asked my question plz before giving negative mark leave me a comment to teach me how to ask my next question
  • Why isn't trigger:'focus' an answer? This automatically hides other popups.
  • Look here, I have just answered Bootstrap popover normalization
  • Look, I have just answered Bootstrap popover normailzation
  • note that other popovers tags would not be removed, they will be simply hided
  • popover('hide') does remove. Name is misleading.
  • As Denis said it's not complete, you should remove it after with $('.btn').not(this).popover('hide').next('.popover').remove()
  • problem is that, when i want new one to open, i have to click two times.
  • @funky-nd i have the same issue, have you found any solution?
  • This is awesome. Thanks for thinking about dynamic popovers in this solution! Elegant.
  • I had to use $("[rel=popover]").not("hide"); instead of $("[rel=popover]").not("destroy");
  • this only works if you change $("[rel=popover]").not("destroy"); to $("[rel=popover]").not('bs.popover').popover("destroy"); otherwise you have to click twice on those who were previously open