Вам нужно дважды щелкнуть после скрытия показанного ботстрапа
$('#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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" 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>
Ответы
Ответ 1
Все еще не исправлено в 3.3.6, но я нашел предложенное решение здесь:
https://github.com/twbs/bootstrap/issues/16732
https://github.com/twbs/bootstrap/pull/17702/files#diff-f3e99e0bb007ace7a370f0492b9cb5abR340
Я применил это в скрытом событии:
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
Это работает для меня. Чтобы быть точно таким же, как предложенное исправление, это будет:
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState = { click: false, hover: false, focus: false }
});
Примечание: я использую делегированные всплывающие окна, поэтому я использую ссылку $ ('body').
Для Bootstrap 4 использования _activeTrigger
вместо inState
:
$(e.target).data("bs.popover")._activeTrigger.click = false
Ответ 2
Недавно я столкнулся с этой ошибкой, и вот как я ее исправил:
$('.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 setup */
e.preventDefault();
});
Ответ 3
Это ошибка в версии 3.3.3:
https://github.com/twbs/bootstrap/issues/16732
Просто используйте 3.3.4, пока он не будет исправлен.
Ответ 4
У меня появилось всплывающее окно, которое исчезает через 3 секунды и требуется двойной щелчок, чтобы снова открыть его. Последующее решение Darren и оно сработало.
$(function () {
$('#popLinks').popover({
html: true,
trigger: 'manual',
animation: true
});
$('#popLinks').click(function () {
$(this).popover('show');
setTimeout(function () {
$('.popover').fadeOut('slow');
}, 3000);
e.preventDefault();
});
});
Ответ 5
Убедитесь, что popover будет инициализирован только один раз. Если он будет инициализирован несколько раз для разных файлов, вы можете столкнуться с этой проблемой.
$('[data-toggle=popover]').popover({
placement : 'bottom'
});
Ответ 6
Я использовал Даррен ответ выше. Извините, Даррен, я до сих пор не могу комментировать другой пост. Одно небольшое изменение, хотя. Я изменил "show" на "toggle", чтобы иметь возможность переключать всплывающее окно.
От:
$(this).popover('show');
к
$(this).popover('toggle');
Ответ 7
Просто используйте это:
$('[data-toggle="popover"]').popover('toggle');
Вместо:
$('[data-toggle="popover"]').popover();