$('#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?
Use the popver(“detroy”) to destroy the popover.
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.
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.
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
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(); });
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