Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

need click twice after hide a shown bootstrap popover

$('#popoverlink').popover();    $("#popoverhide").click(function() {     $("#popoverlink").popover("hide");   });
#popoverlink {      position: absolute;      top: 100px;      left: 100px;  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <a href="#" id="popoverlink" class="btn" rel="popover" title="Some title">Popover</a>  <a href="#" id="popoverhide" class="btn" rel="popover" title="Some title">hide</a>

Same with the fiddle. Sorry the previous link was wrong. This one is correct.

After I hide the shown popover, I need to click the popover trigger twice to show it again.

Is this a bug? Is there anything can avoid this?

UPDATE I means I used another button to hide a popover by

$("#popoverTrigger").popover("hide"); 

Than I need to click the "#popoverTrigger" twice to show it.

STUPID SOLUTION

$("popoverhide").click(function() {     var f = false;     if($("popoverlink").next('div.popover:visible')) {         f = true;         $("popoverlink").popover("hide");     }     if(f) {         $("popoverlink").click();     } }) 

Is there another good idea?

like image 942
Shel Yang Avatar asked Sep 15 '15 09:09

Shel Yang


People also ask

How do I destroy bootstrap popover?

Use the popver(“detroy”) to destroy the popover.

How do I use Popovers in bootstrap?

To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

How do I change the popover position in bootstrap?

Positioning with Margins So to move the popover more to the left, we can add a negative margin-left, or a positive one to move it further to the right. Likewise, we can move the popover more up by adding a negative margin-top, and down by using a positive value.


2 Answers

Still not fixed in 3.3.6 but I found a proposed solution here:

https://github.com/twbs/bootstrap/issues/16732

https://github.com/twbs/bootstrap/pull/17702/files#diff-f3e99e0bb007ace7a370f0492b9cb5abR340

I've applied it in the hidden event:

$('body').on('hidden.bs.popover', function (e) {     $(e.target).data("bs.popover").inState.click = false; }); 

This works for me. To be exactly the same as the proposed fix it would be:

$('body').on('hidden.bs.popover', function (e) {     $(e.target).data("bs.popover").inState = { click: false, hover: false, focus: false } }); 

Note: I use delegated popovers which is why i'm using the $('body') reference.

For Bootstrap 4 use _activeTrigger instead of inState:

$(e.target).data("bs.popover")._activeTrigger.click = false 
like image 179
Jules Avatar answered Oct 02 '22 12:10

Jules


I recently came across this bug and this is how I fixed it:

$('.myPopoverClass')     .popover({         trigger: 'manual', /* <- important, instantiates popover */         container: 'body', /* optional */         animation: false     })     .click(function(e) {         $('.popover').not(this).hide(); /* optional, hide other popovers */         $(this).popover('show'); /* show popover now it's setup */         e.preventDefault();     }); 
like image 36
StudioTime Avatar answered Oct 02 '22 12:10

StudioTime