Создание popover с триггером зависания отлично работает.
Создание всплывающего окна с помощью click работает нормально.
Теперь, как я могу заставить popover появляться, когда запускающее изображение зависнет, но если пользователь нажимает на изображение, отмените наведение и инициируйте переключение на клик? Другими словами, зависание показывает popover и щелкает "штырьками" popover.
HTML довольно стандартный:
<li>User<span class="glyphicon glyphicon-user" rel="popover" data-trigger="click" data-container="body" data-placement="auto left" data-content="Body Text" data-original-title="Title Text"></span></li>
И инициализация popover, еще более скучная:
$(function () {
$("[rel=popover]").popover();
});
Из того, что я видел до сих пор, кажется вероятным, что решение является хорошим сложным набором вызовов popover('show')
, popover('hide')
и popover('toggle')
, но мой javascript/jQuery-foo не соответствует задаче.
EDIT:
Используя код, предоставленный @hajpoj в качестве базы, я добавил функцию, чтобы прослушать событие hidden.bs.popover
, чтобы попытаться повторно активировать события mouseenter и mouseleave после запуска события click, но хотя это и делает "hover" снова, он убивает клик...
var $btn2 = $('#btn2');
var enterShow = function() {
$btn2.popover('show');
};
var exitHide = function() {
$btn2.popover('hide');
}
$btn2.popover({trigger: 'manual'})
.on('mouseenter', enterShow)
.on('mouseleave', exitHide)
.one('click', function() {
$btn2.off('mouseenter', enterShow)
.off('mouseleave', exitHide)
.on('click', function() {
$btn2.popover('toggle');
});
});
$('#btn2').on('hidden.bs.popover', function () {
$btn2.on('mouseenter', enterShow)
.on('mouseleave', exitHide)
});