Show one popover and hide other popovers

Question

I have several buttons, and for each of them I need to add a popover.
I want it like this:
when my user clicks on one of them, I want the others to be hidden. so only one popover is displayed
check and help me fix this plz example:

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 below, I decided to somehow solve the problem:

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

but double-clicking on each button will not be so.

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'); }); 

view the demo

and adjusted the previous demo I hope this helps someone else

Answer 2

None of the answers I saw earlier had dynamic popovers, so this is what I came up with. As some have pointed out, there are problems with popovers causing problems if they are not removed from the DOM using .remove() . I searched for an example from the bootstrap website and created this new script . Dynamic popovers are added using the selector: '[rel=popover]' option selector: '[rel=popover]' . When popover appears, I call destroy on all the other popovers and then delete 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(); }); 

Answer 3

The easiest way to do this is to set trigger="focus" in your popover

Reject next click

Use a focus trigger to dismiss popovers the next time you click.

 <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here some amazing content. It very engaging. Right?">Dismissible popover</a> 

Note - this means that the popover will disappear as soon as you click on it

Answer 4

This is a quick, universal solution that I use when you don't need to know in advance which classes have popovers. I have not tested it very widely. In addition, I use toggle below, as I had some problems with the behavior of the skin was completely different than switching.

  var $currentPopover = null; $(document).on('shown.bs.popover', function (ev) { var $target = $(ev.target); if ($currentPopover && ($currentPopover.get(0) != $target.get(0))) { $currentPopover.popover('toggle'); } $currentPopover = $target; }); $(document).on('hidden.bs.popover', function (ev) { var $target = $(ev.target); if ($currentPopover && ($currentPopover.get(0) == $target.get(0))) { $currentPopover = null; } }); 

Answer 5

You take this too seriously, just close all open pop-ups before starting a new one that needs to be opened:

 // Hide any active popover first $(".popover").each(function () { var $this = $(this); $this.popover('hide'); }); //Now Execute your new popover $('.btn').popover({ html: true, content: mycontent, trigger: 'manual' }).click(function (e) { $(this).popover('toggle'); e.stopPropagation(); }); 

Answer 6

Here is a solution that worked for me. In my scripts, I do not pass vars through the data attribute in HTML, I prefer the logic in my js files.

  $(".vote").popover({ trigger: " click", title: "Attention", content: "You must be a member of the site to vote on answers.", placement: 'right' }); $('.vote').on('click', function (e) { $('.vote').not(this).popover('hide'); }); 

Answer 7

Using Bootstrap 3.3.7 I find this solution:

 var _popoverLink = $('[data-toggle="popover"]'); _popoverLink.on('click', function(){ _popoverLink.popover('destroy').popover({container: 'body'}); $(this).popover('show'); }); 

Sincerely.

Answer 8

I am having difficulty using any of the answers posted to solve this problem using bootstrap v3. After some searching, I found that my main problem was not setting the correct popover trigger. It should be set as "manual" as indicated in the op-question.

The next step was very simple and gives better behavior than the solutions that 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 reject a popover after clicking anywhere on the page, including another link for popover, but allows you to click on the popover itself without releasing it so that the user can access the user for things like copy paste text.

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

ps - I use the .btn class as a selector in my example because it is used in the op question. I would recommend using something less general.

Answer 9

I went for a combination of approaches that I saw both on this topic and on others. My requirements indicate that:

• Only one popover should be visible at a time
• Clicking anywhere outside the popover should reject the popover
• Popsor must contain a control

• No need to overwrite popover event

    function bindEvents() { setupPopupBinding(); setupPopupDismissal(); }; function setupPopupBinding() { $('.addSectionItem').popover({ html: true, content: function () { return createDropdowns($(this).data('sectionid'))[0].outerHTML; }, placement: "right", trigger: "click focus" }).on("inserted.bs.popover", function (e) { //initialize dropdown setupSelect2(); }).on("hide.bs.popover", function (e) { $('.select2-container--open').remove(); }); } function setupPopupDismissal() { $('body:not(.addSectionItem)').on('click', function (e) { $('.addSectionItem').each(function () { //the 'is' for buttons that trigger popups //the 'has' for icons within a button that triggers a popup if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { $(this).popover('hide'); $('.popover').has(e.target).remove(); } }); }); } function createDropdowns(sectionId: number) { var dropdown = $('<div/>') .attr('Id', 'sectionPopupWrapper' + sectionId) .addClass('popupWrapper') .append($('<select/>').addClass('sectionPopup')) .append($('<button/>').addClass('btn btn-primary btn-xs') .attr('data-sectionid', sectionId) .text('Add')); return dropdown; } 

Answer 10

 <ul> <li><i class="fa fa-trash-o DeleteRow" id=""></i>1</li> <li><i class="fa fa-trash-o DeleteRow" id=""></i>2</li> <li><i class="fa fa-trash-o DeleteRow" id=""></i>3</li> </ul> // Close other popover when click on Delete/Open new popover - START // $('.DeleteRow').on('click', function (e) { $('.popover').not(this).popover('hide'); }); // Close other popover when click on Delete/Open new popover - END//