javascript - Twitter bootstrap 2.3.2 popover permanece abierto mientras se desplaza

popover js

Question

Tengo una ventana emergente orientada hacia el fondo que me gustaría ser un poco más indulgente que la ventana emergente predeterminada, que desaparece tan pronto como el mouse abandona el gatillo.

$(''#example'').popover({
html: true,
trigger: ''hover'',
container: ''#example'',
placement: ''bottom'',
content: function () {
return ''<div class="box">here is some content</div>'';
}
});

Tengo que permanecer abierto siempre que el mouse esté sobre el activador o el contenido del popover, pero eso es difícil para el usuario, ya que tienen que pasar del mouse desde el elemento disparador a la flecha hasta el contenido sin dejar esas áreas Para interactuar con el popover. Dos soluciones en mente, ninguna está funcionando:

1) La opción de retraso debe hacer esto. agregar delay: {hide: 500} a la llamada emergente deja la ventana emergente abierta después de que el mouse se va, pero volver a ingresar el elemento de activación o la ventana emergente antes de que desaparezca no le dice a bootstrap que mantenga abierta la ventana emergente, por lo que desaparece al final del tiempo de espera inicial.

2) amplíe el elemento que contiene la flecha para que el mouse que va del elemento desencadenante al fondo entre el elemento desencadenante y la ventana emergente funcione (el mouse nunca habría dejado el desencadenante / elemento). Los siguientes trabajos, excepto la flecha, se dibujan con bordes CSS superpuestos, por lo que el fondo no es transparente: http://jsfiddle.net/HAZS8/

.popover.bottom .arrow {
left: 0%;
padding-left:50%;
padding-right:50%;
}

La solución consiste en interconectar los eventos de mouseover y mouseleave con jquery, o reemplazar la flecha de bordes superpuestos con una imagen. ¿Mejor arreglos?

Answer 1

Puedes manejar el show y hide eventos para la ventana emergente:

$(''#example'').popover({
html: true,
trigger: ''hover'',
container: ''#example'',
placement: ''bottom'',
content: function () {
return ''<div class="box">here is some content</div>'';
},
animation: false
}).on({
show: function (e) {
var $this = $(this);
// Currently hovering popover
$this.data("hoveringPopover", true);
// If it''s still waiting to determine if it can be hovered, don''t allow other handlers
if ($this.data("waitingForPopoverTO")) {
e.stopImmediatePropagation();
}
},
hide: function (e) {
var $this = $(this);
// If timeout was reached, allow hide to occur
if ($this.data("forceHidePopover")) {
$this.data("forceHidePopover", false);
return true;
}
// Prevent other `hide` handlers from executing
e.stopImmediatePropagation();
// Reset timeout checker
clearTimeout($this.data("popoverTO"));
// No longer hovering popover
$this.data("hoveringPopover", false);
// Flag for `show` event
$this.data("waitingForPopoverTO", true);
// In 1500ms, check to see if the popover is still not being hovered
$this.data("popoverTO", setTimeout(function () {
// If not being hovered, force the hide
if (!$this.data("hoveringPopover")) {
$this.data("forceHidePopover", true);
$this.data("waitingForPopoverTO", false);
$this.popover("hide");
}
}, 1500));
// Stop default behavior
return false;
}
});

DEMO: http://jsfiddle.net/L4Hc2/

No parece que haya nada integrado en el popover para la funcionalidad que deseas, así que esto es lo que se me ocurrió :)

Lo bueno es que solo permite que los manejadores se ejecuten si realmente deberían hacerlo, si la ventana emergente se oculta o se muestra. Además, cada instancia de un popover es única entre sí, por lo que no hay trucos globales en marcha.

Answer 2

Tengo un enfoque más genérico para resolver esto, que estoy usando yo mismo. Implica sobrecargar la función de ocultación del elemento emergente, verificar si la información sobre herramientas asociada se está moviendo y reacciona de manera apropiada, en lugar de agregar toda la configuración de datos de manejo de eventos y html5.

(function($) {
var oldHide = $.fn.popover.Constructor.prototype.hide;
$.fn.popover.Constructor.prototype.hide = function() {
if (this.options.trigger === "hover" && this.tip().is(":hover")) {
var that = this;
// try again after what would have been the delay
setTimeout(function() {
return that.hide.call(that, arguments);
}, that.options.delay.hide);
return;
}
oldHide.call(this, arguments);
};
})(jQuery);

Carga esto después de tus fuentes bootstrap & jQuery.