need click twice after hide a shown bootstrap popover
JqueryTwitter BootstrapJquery Problem Overview
$('#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][1]. 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? [1]: http://jsfiddle.net/npq3A/98/
Jquery Solutions
Solution 1 - Jquery
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
Solution 2 - Jquery
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();
});
Solution 3 - Jquery
It's a bug in v3.3.5:
https://github.com/twbs/bootstrap/issues/16732
Just use 3.3.4 for now until it is fixed.
Solution 4 - Jquery
Simply use this:
$('[data-toggle="popover"]').popover('toggle');
Instead of:
$('[data-toggle="popover"]').popover();
Solution 5 - Jquery
I had a popup that fades out after 3 secs and needed double click to reopen it. Followed Darren's solution and it worked.
$(function () {
$('#popLinks').popover({
html: true,
trigger: 'manual',
animation: true
});
$('#popLinks').click(function () {
$(this).popover('show');
setTimeout(function () {
$('.popover').fadeOut('slow');
}, 3000);
e.preventDefault();
});
});
Solution 6 - Jquery
make sure popover will be initialized only once.if it will be initialized more than one time across different files you may get this problem.
$('[data-toggle=popover]').popover({
placement : 'bottom'
});
Solution 7 - Jquery
I used Darren's answer above. Sorry Darren, I still can't comment on other's post. One slight change though. I changed 'show' to 'toggle' to be able to toggle the popup box.
From:
$(this).popover('show');
To
$(this).popover('toggle');
Solution 8 - Jquery
I fixed the issue using the lines of code below:
Explanation: hide the shown popover before showing the new one using show.bs.popover event
Important! do not use $('.popover').hide(); it will prevent the popover to be shown until you click twice, but use $('element').popover('hide') instead
$('[data-toggle="popover"]').on('show.bs.popover', function () {
try {
$('element').popover('hide');
} catch (ex) {
console.log(ex);
}
});
// then use $('[data-toggle="popover"]').popover(); to show your popover
It works also in case of multiple popover.