javascript - ejemplo - Hacer que Bootstrap Popover aparezca/desaparezca al pasar el ratón en lugar de hacer clic

tooltip input bootstrap

Question

Estoy construyendo un sitio web con Bootstrap''s Popover y no puedo imaginar cómo hacer que el popover aparezca al pasar el mouse sobre el mouse en lugar de hacer clic.

Todo lo que quiero hacer es hacer aparecer 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 varios popovers.

Answer 1

Después de probar algunas de estas respuestas y descubrir que no se adaptan bien con múltiples 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 trabajar, y también parece funcionar perfectamente, al menos en Chrome.

Agrega esta línea para activarla:

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

Y estas configuraciones a 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, así que debería funcionar bien en proyectos más antiguos.

Answer 2

La funcionalidad que describió se puede lograr fácilmente usando 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

Answer 3

Me gustaría agregar que para la accesibilidad, creo que deberías agregar el desencadenador de foco:

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

Answer 4

Si también quieres desplazar el popover, debes usar un activador 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);
    });
}

Answer 5

Establezca la opción de trigger del popover en lugar de click , que es el Popover .

Esto se puede hacer utilizando los atributos data-* 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 .