Twitter bootstrap 2.3.2 ventana emergente permanecer abierta mientras se cierne

Tengo un fondo orientado a la ventana emergente que me gustaría ser un poco más exigente que el predeterminado de la ventana emergente, que desaparece tan pronto como el ratón sale 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 abierta mientras el ratón está sobre el gatillo o el contenido de la ventana emergente, pero que difícil para el usuario, ya que tenemos a mouse (ratón) en el elemento desencadenante de la flecha para el contenido sin salir de esas zonas con el fin de interactuar con la ventana emergente. Dos soluciones en mente, ni es trabajo:

1) la opción de retrasar deberían hacerlo. la adición de
delay: {hide: 500}
la ventana emergente llamada de las hojas de la ventana emergente abierta después de que el ratón sale, pero volver a entrar en el gatillo elem o la ventana emergente antes de que desaparezca de no contar bootstrap para mantener la ventana emergente abierta, por lo que desaparece al final del tiempo de espera inicial.

2) ampliar la flecha del elemento de contención para que el ratón va desde el elemento desencadenante de fondo entre el elemento desencadenante y la ventana emergente para ventana emergente de obras (el ratón, a continuación, nunca hubiera dejado el gatillo/elemento). Las siguientes obras, excepto la flecha se dibuja con la superposición de CSS fronteras, 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 es difícil de alambre el ratón y mouseleave eventos con jquery, o para sustituir la superposición de los límites de flecha con una imagen. Mejor arregla?

InformationsquelleAutor user941238 | 2013-05-24

2 Kommentare

  1. 19

    Usted puede manejar la show y hide eventos de 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/

    Parece que no hay nada construido-en la ventana emergente para la funcionalidad que usted desea, así que esto es lo que se me ocurrió 🙂

    Lo bueno es que sólo permite a los controladores de ejecutar si realmente debería – si la ventana emergente es la realidad que se oculta o se muestra. También, cada instancia de una ventana emergente es único de cada uno de los otros, así que no hay engaño global pasando.

    • Gracias! No pude encontrar nada construir-en el twitter ventana emergente o para la jqueryUI uno. Esto funciona bien aunque.
    • A mí tampoco, así que sólo traté de algo personalizado y parecía funcionar 🙂
    • Esta respuesta no me funciona, y su jsfiddle no parece funcional en cualquiera de los navegadores que he comprobado (el más reciente de firefox o chrome)
    • Habría sido más útil si has mirado en su navegador de la consola o algo. La Url para el bootstrap archivos de la biblioteca estaban rotos. Yo simplemente reemplazado y volverá a la normalidad. Puede comprobar la versión actualizada de violín
  2. 32

    Tengo una más genérica de enfoque para la resolución de este, en el que estoy usando yo. Implica la sobrecarga de la ventana emergente de la función de ocultar, la comprobación de si la información sobre herramientas asociado se cernía sobre, y reacciona de manera adecuada, en lugar de añadir todos los que la gestión de eventos & html5 configuración de los datos.

    (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);

    De carga de este después de su arranque de & jQuery fuentes.

    • ¿tienes un jsfiddle para una maqueta?
    • Creo que esta muestra de trabajo: jsfiddle.net/J9fYR
    • bonito Ian, gracias
    • hola, ¿cómo puedo adjuntar un script php en el contenido, como por ejemplo yo quiero agregar un script wordpress <?php wp_nav_menu() ?> en el contenido
    • Gracias, funciona con Bootstrap 3
    • ¿No deberías estar usando apply en lugar de call en ambos casos, ya que estamos pasando un array(ish)?
    • También, arguments dentro de la setTimeout de devolución de llamada se hará referencia a los argumentos que se pasan por setTimeout a la devolución de llamada, cuando creo que realmente quieren los argumentos que se pasan a hide, en cuyo caso usted debe hacer, por ejemplo, args = arguments en el mismo tiempo que usted that = this y, a continuación, utilizar args en el setTimeout de devolución de llamada.
    • Un punto menor — la actual versión de bootstrap apoya pasar una lista delimitada por espacios de los factores desencadenantes en la ventana emergente opciones. Si pasa trigger: 'hover focus', por ejemplo, este ejemplo no funciona. Simplemente la sustitución de this.options.trigger === con this.options.trigger.indexOf debería solucionar el problema.
    • Esto es genial. Una nota de si: Usted tiene que programar el retardo opción ocultar (por ejemplo, ocultar: 1000) para que funcione. De lo contrario, se queda sólo si su ratón es ir a través de la punta de triángulo.
    • muchas gracias, su funciona a la perfección.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea