Set the trigger option of the popover to hover instead of click , which is the default one. Or with an initialization option: $("#popover"). popover({ trigger: "hover" });
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.
Click on all popovers and then click hide . After clicking hide you can click on the popovers again. Click on all popovers and then click destroy .
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 :
i.e. $("#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);
});
}
The functionality, you described, can be easily achieved using the Bootstrap tooltip.
<button id="example1" data-toggle="tooltip">Tooltip on left</button>
Then call tooltip() function for the element.
$('#example1').tooltip();
http://getbootstrap.com/javascript/#tooltips
After trying a few of these answers and finding they don't scale well with multiple links (for example the accepted answer requires a line of jquery for every link you have), I came across a way that requires minimal code to get working, and it also appears to work perfectly, at least on Chrome.
You add this line to activate it:
$('[data-toggle="popover"]').popover();
And these settings to your anchor links:
data-toggle="popover" data-trigger="hover"
See it in action here, I'm using the same imports as the accepted answer so it should work fine on older projects.
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