jquery - content - Bootstrap popover, ocultar al hacer clic fuera?

tooltip in button bootstrap

Question

usando la ventana emergente bootstrap, y ahora estoy tratando de obtener este código para hacer clic fuera de la ventana emergente para cerrar la ventana emergente:

$(''body'').on(''click'', function (e) {
    $(''[data-toggle="popover"]'').each(function () {
        //the ''is'' for buttons that trigger popups
        //the ''has'' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $(''.popover'').has(e.target).length === 0) {
            $(this).popover(''hide'');
        }
    });
});

Pero cuando uso esta parte, puedo cerrar la ventana emergente, pero no puedo hacer clic en los otros botones, ¿alguien tiene alguna idea de cómo puedo hacer eso?

Todos los botones:

<a href="#" class="btn btn-xs btn-primary" data-toggle="popover">This opens popover</a>
<a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn''t work 
<a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn''t work 

Answer 1

De hecho, ni siquiera necesita JS, ya que existe una configuración para esto en Bootstrap.

Consulte: http://getbootstrap.com/javascript/#dismiss-on-next-click

"Marcado específico requerido para descartar en el siguiente clic Para un comportamiento adecuado entre navegadores y plataformas cruzadas, debe usar la etiqueta <a> , no la etiqueta <button> , y también debe incluir la función =" botón " y los atributos de tabindex ".

Ex. :

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here''s some amazing content. It''s very engaging. Right?">Dismissible popover</a>

Answer 2

Encontré esto: http://bootply.com/99372

$(''body'').on(''click'', function (e) {
    $(''[data-toggle=popover]'').each(function () {
        // hide any open popovers when the anywhere else in the body is clicked
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $(''.popover'').has(e.target).length === 0) {
            $(this).popover(''hide'');
        }
    });
});

Es casi el mismo código que tú ...

Answer 3

Incluso tuve ese problema ... y puedo deshacerme de él ...

simplemente agregue esta línea en su código ...:

 $(this).css(''display'', ''none'');

es decir

    $(''[data-toggle="popover"]'').each(function () {
        //the ''is'' for buttons that trigger popups
        //the ''has'' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $(''.popover'').has(e.target).length === 0) {
            $(this).popover(''hide'');
          $(''[data-toggle="popover"]'').css(''display'',''none'');
        }
    });
});

Sugerencia: en lugar de la etiqueta ''body'' puede usar ''document''

Answer 4

Prueba esto. Cerrará la ventana emergente cuando haga clic en el exterior de la ventana emergente.

$(''body'').on(''click'', function (e) {
//did not click a popover toggle, or icon in popover toggle, or popover
if ($(e.target).data(''toggle'') !== ''popover'' && $(e.target).parents(''[data-toggle="popover"]'').length === 0
    && $(e.target).parents(''.popover.in'').length === 0) {
    (($(''[data-toggle="popover"]'').popover(''hide'').data(''bs.popover'') || {}).inState || {}).click = false;
}
});

Otra solución,

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here''s some amazing content. It''s very engaging. Right?">Dismissible popover</a>

agregar tabindex = "0" y data-trigger = "focus"

Answer 5

Simplemente agregue este elemento para cerrar la ventana emergente en el siguiente clic.

data-trigger="focus" 

Referencia desde aquí: Bootstrap Popover

Answer 6

Simplemente ocultar popover no funcionará. Deberá hacer clic dos veces para mostrar el popover nuevamente. https://github.com/twbs/bootstrap/issues/16732

Para que funcione correctamente para Bootstrap 3.3.6. Prueba esto:

$(''body'').on(''click'', function (e) {
        $(''[data-toggle=popover]'').each(function () {
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $(''.popover'').has(e.target).length === 0) {
                (($(this).popover(''hide'').data(''bs.popover'')||{}).inState||{}).click = false;
            }
        });
    });

Bootstrap 4 usa _activeTrigger lugar de inState :

$(e.target).data("bs.popover")._activeTrigger.click = false

Answer 7

en realidad estoy de acuerdo con este código porque ninguna de las soluciones anteriores funcionó para mí:

 $(''body'').on(''mouseleave'', ''.popover'', function () {
        $(this).hide();
    });

Answer 8

Acabo de codificar mi propia variante de su respuesta, porque tengo un problema por el cual, si intento volver a abrir una ventana emergente después de hacer clic en Ousite, tenía que hacer clic en el botón 2 veces.

El objetivo de este código es simular un clic en el botón que activa la ventana emergente.

Así que ahí está el código:

$(''html'').on(''click'', function(e) {
    $(''[data-toggle="popover"]'').each(function() { //Loop for everything containing a data-toggle="popover"
        if ($(this).attr(''aria-describedby'') != null ) { //Check if the popover is active / contain an aria-describedby with a value
            var id = $(this).attr(''aria-describedby''); //Put the value in a variable
            if (!$(e.target).closest(".popover-content").length && $(e.target).attr("aria-describedby") != id && !$(e.target).closest(''[aria-describedby="''+id+''"'').length) { //Look if the click is a child of the popover box or if it''s the button itself or a child of the button
                $(''[aria-describedby="''+id+''"]'').trigger( "click" ); //trigger a click as if you clicked the button
            }
        }
    });
});

Answer 9

**Try this**,below code is work for me,
Put below code in js file

$(function () {
    $(''[data-toggle="popover"]'').popover();
});
$(''html'').on(''click'', function (e) {
    $(''[data-toggle="popover"]'').each(function () {
           if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $(''.popover'').has(e.target).length === 0) {
            $(this).popover(''hide'');
        }
    });
});

and HTML tag should be like this

<a data-toggle="popover"   data-placement="bottom" data-content-id="notifications-content">