Make Bootstrap Popover Appear/Disappear on Hover instead of Click
I'm building a website with Bootstrap's Popover and I can't figure out how to make the popover appear on hover instead of click.
All I want to do is have a popover appear when someone hovers over a link instead of clicking on it and for the popover to disappear when they move away. The documentation says it's possible using either the data attribute or jquery. I'd much rather do it with jquery since I have multiple popovers.
Set the trigger option of the popover to hover instead of click , which is the default one.
This can be done using either data-* attributes in the markup:
<a id="popover" data-trigger="hover">Popover</a>
Or with an initialization option:
$("#popover").popover({ trigger: "hover" });
Here's a DEMO .
I'd like to add that for accessibility, I think you should add focus trigger :
ie $("#popover").popover({ trigger: "hover focus" });
If you want to hover the popover itself as well you have to use a manual trigger.
This is what i came up with:
function enableThumbPopover() {
var counter;
$('.thumbcontainer').popover({
trigger: 'manual',
animation: false,
html: true,
title: function () {
return $(this).parent().find('.thumbPopover > .title').html();
},
content: function () {
return $(this).parent().find('.thumbPopover > .body').html();
},
container: 'body',
placement: 'auto'
}).on("mouseenter",function () {
var _this = this; // thumbcontainer
console.log('thumbcontainer mouseenter')
// clear the counter
clearTimeout(counter);
// Close all other Popovers
$('.thumbcontainer').not(_this).popover('hide');
// start new timeout to show popover
counter = setTimeout(function(){
if($(_this).is(':hover'))
{
$(_this).popover("show");
}
$(".popover").on("mouseleave", function () {
$('.thumbcontainer').popover('hide');
});
}, 400);
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
if(!$(_this).is(':hover')) // change $(this) to $(_this)
{
$(_this).popover('hide');
}
}
}, 200);
});
}
上一篇: 索引问题与twitter引导下拉菜单