Hacer que aparezca Popover Bootstrap / desaparecer al pasar el mouse sobre él en lugar de hacer clic

181

Estoy creando un sitio web con Popover de Bootstrap y no puedo entender cómo hacer que el popover aparezca al pasar el mouse sobre él en lugar de hacer clic.

Todo lo que quiero hacer es que aparezca un popover cuando alguien pasa el mouse sobre un enlace en lugar de hacer clic en él y que el popover desaparezca cuando se aleja. La documentación dice que es posible usar el atributo de datos o jquery. Prefiero hacerlo con jquery ya que tengo múltiples popovers.

javascript jquery twitter-bootstrap Muhambi
fuente
20
Sugerencia: el desplazamiento está mal en los dispositivos táctiles. Si desea garantizar la usabilidad de las pantallas táctiles, no vincule la funcionalidad para desplazarse.
Jørgen R

Respuestas:

374

Establezca la triggeropción del popover en hoverlugar de click, que es la predeterminada .

Esto se puede hacer usando cualquiera de los data-*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 DEMO .

João Silva
fuente
Gracias por la respuesta. ¿Cómo configuro una opción de activación para este código? <script> $(function () { $("#popover").popover(); }); </script>
Muhambi
8
@Jake: Uso $("#popover").popover({ trigger: "hover" });.
João Silva
¡Gracias! por alguna razón, necesitaba implementar tanto el desencadenante de datos como la inicialización JS.
Anthony
¿Alguien puede ayudarme a entender cuál es la mejor opción, la inicialización JS o los atributos de datos? Incluso si uso atributos de datos, todavía tendría que llamar a $ ("# popover"). Popover (); de mi JavaScript
Bailey
@Bailey Dependerá de cuáles sean sus reglas de codificación y si está trabajando con algún estándar de codificación en particular, y luego de sus preferencias personales. Mirando los dos, prefiero apuntar a la opción de disparo dentro de la función popover (). Me parece más legible.
Coderhi
33

Me gustaría agregar eso para accesibilidad, creo que debería agregar desencadenante de enfoque:

es decir $("#popover").popover({ trigger: "hover focus" });

Calexo
fuente
No haga clic para esta solicitud: mire este título de la publicación
Diseño web de Albuquerque
14

Si desea desplazar el popover en sí también, 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);
    });
}
Johannes Ferner
fuente
6

La funcionalidad que describió se puede lograr fácilmente con la información sobre herramientas de Bootstrap.

<button id="example1" data-toggle="tooltip">Tooltip on left</button>

Luego llame a la función tooltip () para el elemento.

$('#example1').tooltip();

http://getbootstrap.com/javascript/#tooltips

VforVitamin
fuente
1

Después de probar algunas de estas respuestas y descubrir que no se ajustan bien con varios enlaces (por ejemplo, la respuesta aceptada requiere una línea de jquery para cada enlace que tenga), encontré una forma que requiere un código mínimo para funcionar, y También parece funcionar perfectamente, al menos en Chrome.

Agrega esta línea para activarla:

$('[data-toggle="popover"]').popover();

Y estas configuraciones para sus enlaces de anclaje:

data-toggle="popover" data-trigger="hover"

Véalo en acción aquí , estoy usando las mismas importaciones que la respuesta aceptada, por lo que debería funcionar bien en proyectos más antiguos.

Peter
fuente