Hacer que Bootstrap Popover aparezca/desaparezca al pasar el cursor en lugar de hacer clic
Estoy creando un sitio web con el popover de Bootstrap y no puedo entender cómo hacer que el popover aparezca al pasar el mouse en lugar de hacer clic.
Todo lo que quiero hacer es que aparezca una ventana emergente cuando alguien pasa el cursor sobre un enlace en lugar de hacer clic en él y que la ventana emergente desaparezca cuando se aleja. La documentación dice que es posible utilizar el atributo de datos o jquery. Prefiero hacerlo con jquery ya que tengo múltiples ventanas emergentes.
Establezca la triggeropción de la ventana emergente en hoveren lugar de click, que es la predeterminada .
Esto se puede hacer usando cualquiera de data-*los atributos en el marcado:
<a id="popover" data-trigger="hover">Popover</a>
O con una opción de inicialización:
$("#popover").popover({ trigger: "hover" });
Aquí hay una DEMOSTRACIÓN .
Me gustaría agregar eso por motivos de accesibilidad, creo que deberías agregar un activador de enfoque:
es decir$("#popover").popover({ trigger: "hover focus" });
Si también desea desplazar el cursor sobre la ventana emergente, debe usar un disparador manual.
Esto es lo que se me ocurrió:
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);
});
}
