¿Podemos hacer que los popovers sean descartables de la misma manera que los modales, es decir. ¿cerrarlos cuando el usuario hace clic en algún lugar fuera de ellos?

Desafortunadamente, no puedo usar modal real en lugar de popover, porque modal significa posición: fijo y eso ya no sería popover. :(

Actualización: una solución un poco más robusta: http://jsfiddle.net/mattdlockyer/C5GBU/72/

Para botones que solo contienen texto:

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

Para los botones que contienen iconos, use (este código tiene un error en Bootstrap 3.3.6, consulte la solución a continuación en esta respuesta)

$('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');
        }
    });

Para popovers generados por JS Uso '[data-original-title]'en lugar de'[data-toggle="popover"]'

Advertencia: La solución anterior permite que se abran múltiples popovers a la vez.

Un popover a la vez, por favor:

Actualización: Bootstrap 3.0.x, ver código o violín http://jsfiddle.net/mattdlockyer/C5GBU/2/

$('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');
        }
    });
});

Esto maneja el cierre de popovers ya abiertos y sin hacer clic o sus enlaces no se han hecho clic.

Actualización: Bootstrap 3.3.6, ver violín

Soluciona el problema donde, después del cierre, toma 2 clics para volver a abrir

$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').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('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
        }

    });
});

Actualización: Utilizando el condicional de la mejora anterior, se logró esta solución. Solucione el problema de doble clic y popover fantasma:

$(document).on("shown.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','1');
});
$(document).on("hidden.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','0');
});
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').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) {
            if($(this).attr('someattr')=="1"){
                $(this).popover("toggle");
            }
        }
    });
});

$('html').on('mouseup', function(e) {
    if(!$(e.target).closest('.popover').length) {
        $('.popover').each(function(){
            $(this.previousSibling).popover('hide');
        });
    }
});

Esto cierra todos los elementos emergentes si hace clic en cualquier lugar excepto en un elemento emergente

ACTUALIZACIÓN para Bootstrap 4.1

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});

La versión más simple, más segura , funciona con cualquier versión de arranque.

Demostración: http://jsfiddle.net/guya/24mmM/

Demostración 2: no descartar al hacer clic dentro del contenido emergente http://jsfiddle.net/guya/fjZja/

Demostración 3: Popovers múltiples: http://jsfiddle.net/guya/6YCjW/

Simplemente llamando a esta línea descartará todos los popovers:

$('[data-original-title]').popover('hide');

Descarta todos los popovers al hacer clic afuera con este código:

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined') {
    $('[data-original-title]').popover('hide');
  }
});

El fragmento de arriba adjunta un evento de clic en el cuerpo. Cuando el usuario hace clic en un popover, se comportará de manera normal. Cuando el usuario hace clic en algo que no es un popover, cerrará todos los popovers.

También funcionará con popovers que se inician con Javascript, a diferencia de otros ejemplos que no funcionarán. (ver la demostración)

Si no desea descartar al hacer clic dentro del contenido emergente, use este código (vea el enlace a la segunda demostración):

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

Con Bootstrap 2.3.2 puede configurar el disparador para 'enfocar' y simplemente funciona:

$('#el').popover({trigger:'focus'});

Básicamente, esto no es muy complejo, pero hay que hacer algunas comprobaciones para evitar problemas técnicos.

Demostración (jsfiddle)

var $poped = $('someselector');

// Trigger for the popover
$poped.each(function() {
    var $this = $(this);
    $this.on('hover',function() {
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    });
});

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() {
    $poped.popover('hide');
});

Ninguna de las supuestas soluciones de alta votación me funcionó correctamente. Cada uno conduce a un error cuando, después de abrir y cerrar (haciendo clic en otros elementos) el popover por primera vez, no se abre de nuevo, hasta que haga dos clics en el enlace de activación en lugar de uno.

Así que lo modifiqué un poco:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})

Hice un jsfiddle para mostrarle cómo hacerlo:

http://jsfiddle.net/3yHTH/

La idea es mostrar el popover cuando hace clic en el botón y ocultar el popover cuando hace clic fuera del botón.

HTML

<a id="button" href="#" class="btn btn-danger">Click for popover</a>

JS

$('#button').popover({
    trigger: 'manual',
    position: 'bottom',
    title: 'Example',
    content: 'Popover example for SO'
}).click(function(evt) {
    evt.stopPropagation();
    $(this).popover('show');
});

$('html').click(function() {
    $('#button').popover('hide');
});

simplemente agregue este atributo con el elemento

data-trigger="focus"

Esto se ha preguntado antes aquí . La misma respuesta que di entonces aún se aplica:

Tenía una necesidad similar, y encontré esta pequeña gran extensión del Twitter Bootstrap Popover de Lee Carmichael, llamada BootstrapX - clickover . Él también tiene algunos ejemplos de uso aquí . Básicamente, cambiará el popover a un componente interactivo que se cerrará cuando haga clic en otra parte de la página, o en un botón de cierre dentro del popover. Esto también permitirá múltiples popovers abiertos a la vez y un montón de otras características interesantes.

Esto es tarde para la fiesta ... pero pensé en compartirlo. Me encanta el popover pero tiene muy poca funcionalidad incorporada. Escribí una extensión de arranque .bubble () que es todo lo que me gustaría que fuera Popover. Cuatro formas de despedir. Haga clic afuera, active el enlace, haga clic en la X y presione escapar.

Se posiciona automáticamente para que nunca se salga de la página.

https://github.com/Itumac/bootstrap-bubble

Esta no es una autopromoción gratuita ... He tomado el código de otras personas tantas veces en mi vida que quería ofrecer mis propios esfuerzos. Dale una vuelta y mira si te funciona.

De acuerdo con http://getbootstrap.com/javascript/#popovers ,

<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>

Use el desencadenador de foco para descartar popovers en el siguiente clic que haga el usuario.

$('.popover-dismiss').popover({
    trigger: 'focus'
})

Solución aceptada modificada. Lo que he experimentado es que después de ocultar algunos popovers, tendrían que hacer clic dos veces para volver a aparecer. Esto es lo que hice para asegurarme de que no se llamara a popover ('hide') en popovers ya ocultos.

$('body').on('click', function (e) {
    $('[data-original-title]').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) {
            var popoverElement = $(this).data('bs.popover').tip();
            var popoverWasVisible = popoverElement.is(':visible');

            if (popoverWasVisible) {
                $(this).popover('hide');
                $(this).click(); // double clicking required to reshow the popover if it was open, so perform one click now
            }
        }
    });
});

Simplemente agregue este atributo al elemento html para cerrar popover en el siguiente clic.

data-trigger="focus"

referencia de https://getbootstrap.com/docs/3.3/javascript/#popovers

Esta solución funciona bien:

$("body")   .on('click'     ,'[data-toggle="popover"]', function(e) { 
    e.stopPropagation();
});

$("body")   .on('click'     ,'.popover' , function(e) { 
     e.stopPropagation();
});

$("body")   .on('click'  , function(e) {
        $('[data-toggle="popover"]').popover('hide');
});

jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });

También puede usar el burbujeo de eventos para eliminar la ventana emergente del DOM. Está un poco sucio, pero funciona bien.

$('body').on('click touchstart', '.popover-close', function(e) {
  return $(this).parents('.popover').remove();
});

En su HTML, agregue la clase .popover-close al contenido dentro del popover que debería cerrar el popover.

Parece que el método 'ocultar' no funciona si crea el popover con delegación de selector, en su lugar, debe usarse 'destruir'.

Lo hice funcionar así:

$('body').popover({
    selector: '[data-toggle="popover"]'
});

$('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('destroy');
        }
    });
});

JSfiddle aquí

Descubrimos que teníamos un problema con la solución de @mattdlockyer (¡gracias por la solución!). Al usar la propiedad de selector para el constructor de popover como este ...

$(document.body').popover({selector: '[data-toggle=popover]'});

... la solución propuesta para BS3 no funcionará. En su lugar, crea una segunda instancia de popover local a su $(this). Aquí está nuestra solución para evitar eso:

$(document.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) {
            var bsPopover = $(this).data('bs.popover'); // Here's where the magic happens
            if (bsPopover) bsPopover.hide();
        }
    });
});

Como se mencionó $(this).popover('hide');, creará una segunda instancia debido al oyente delegado. La solución proporcionada solo oculta popovers que ya están instanciados.

Espero poder ahorrarles algo de tiempo.

Bootstrap lo admite de forma nativa :

JS Bin Demo

Marcado específico requerido para descartar en el siguiente clic

Para un comportamiento adecuado entre navegadores y plataformas, debe usar la <a>etiqueta, no la <button>etiqueta, y también debe incluir los atributos role="button"y tabindex.

esta solución elimina el molesto segundo clic al mostrar el popover por segunda vez

probado con Bootstrap v3.3.7

$('body').on('click', function (e) {
    $('.popover').each(function () {
        var popover = $(this).data('bs.popover');
        if (!popover.$element.is(e.target)) {
            popover.inState.click = false;
            popover.hide();                
        }
    });
});

He intentado muchas de las respuestas anteriores, realmente nada funciona para mí, pero esta solución lo hizo:

https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

Recomiendan usar la etiqueta de anclaje, no el botón y cuidar los atributos role = "button" + data-trigger = "focus" + tabindex = "0".

Ex:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" 
data-trigger="focus" title="Dismissible popover" data-content="amazing content">
Dismissible popover</a>

Se me ocurrió esto: mi escenario incluía más popovers en la misma página, y ocultarlos los hacía invisibles y, por eso, no fue posible hacer clic en los elementos detrás del popover. La idea es marcar el enlace de popover específico como 'activo' y luego simplemente puede 'alternar' el popover activo. Hacerlo cerrará el popover completamente $ ('. Popover-link'). Popover ({html: true, container: 'body'})

$('.popover-link').popover().on 'shown.bs.popover', ->
  $(this).addClass('toggled')

$('.popover-link').popover().on 'hidden.bs.popover', ->
  $(this).removeClass('toggled')

$("body").on "click", (e) ->
  $openedPopoverLink = $(".popover-link.toggled")
  if $openedPopoverLink.has(e.target).length == 0
    $openedPopoverLink.popover "toggle"
    $openedPopoverLink.removeClass "toggled"

Simplemente elimino otros popovers activos antes de que se muestre el nuevo popover (bootstrap 3):

$(".my-popover").popover();

$(".my-popover").on('show.bs.popover',function () {
    $('.popover.in').remove();
});              

probado con 3.3.6 y el segundo clic está bien

        $('[data-toggle="popover"]').popover()
            .click(function () {
            $(this).popover('toggle');
        });;

        $(document).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');
                }
            });
        });

demostración: http://jsfiddle.net/nessajtr/yxpM5/1/

var clickOver = clickOver || {};
clickOver.uniqueId = $.now();

clickOver.ClickOver = function (selector, options) {
    var self = this;

    //default values
    var isVisible, clickedAway = false;

    var callbackMethod = options.content;
var uniqueDiv = document.createElement("div");
var divId = uniqueDiv.id = ++clickOver.uniqueId;
uniqueDiv.innerHTML = options.loadingContent();

options.trigger = 'manual';
options.animation = false;
options.content = uniqueDiv;

self.onClose = function () {
    $("#" + divId).html(options.loadingContent());
    $(selector).popover('hide')
    isVisible = clickedAway = false;
};
self.onCallback = function (result) {
    $("#" + divId).html(result);
};

$(selector).popover(options);

//events
$(selector).bind("click", function (e) {
    $(selector).filter(function (f) {
        return $(selector)[f] != e.target;
    }).popover('hide');

    $(selector).popover("show");
    callbackMethod(self.onCallback);

    isVisible = !(clickedAway = false);
});

$(document).bind("click", function (e) {
    if (isVisible && clickedAway && $(e.target).parents(".popover").length == 0) {
        self.onClose();
        isVisible = clickedAway = false;
    } else clickedAway = true;
});

}

Esta es mi solución para ello.

Este enfoque garantiza que pueda cerrar una ventana emergente haciendo clic en cualquier lugar de la página. Si hace clic en otra entidad en la que se puede hacer clic, oculta todos los demás elementos emergentes. La animación: se requiere falso; de lo contrario, obtendrá un error jquery .remove en su consola.

$('.clickable').popover({
 trigger: 'manual',
 animation: false
 }).click (evt) ->
  $('.clickable').popover('hide')
  evt.stopPropagation()
  $(this).popover('show')

$('html').on 'click', (evt) ->
  $('.clickable').popover('hide')

Ok, este es mi primer intento de responder algo en stackoverflow, así que aquí no pasa nada: P

Parece que no está del todo claro que esta funcionalidad realmente funcione de forma inmediata en el último arranque (bueno, si estás dispuesto a comprometer dónde puede hacer clic el usuario. No estoy seguro de si tienes que poner 'clic' pase el mouse 'per-se pero en un iPad, el clic funciona como una palanca.

El resultado final es que en un escritorio puede desplazarse o hacer clic (la mayoría de los usuarios se desplazarán). En un dispositivo táctil, tocar el elemento lo abrirá y tocarlo nuevamente lo derribará. Por supuesto, este es un pequeño compromiso de su requisito original, pero al menos su código ahora está más limpio :)

$ (". my-popover"). popover ({trigger: 'click hover'});

Tomando el código de Matt Lockyer, hice un reinicio simple para que el elemento dom no se cubra en hide.

Código de Matt: http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

Violín: http://jsfiddle.net/mrsmith/Wd2qS/

    $('body').on('click', function (e) {
    //hide popover from dom to prevent covering elements
    $('.popover').css('display', 'none');
    //bring popover back if trigger element is clicked
    $('[data-toggle="popover"]').each(function () {
        if ($(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $('.popover').css('display', 'block');
        }
    });
    //hide popover with .popover method
    $('[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');
        }
    });
});

Prueba esto, esto se ocultará haciendo clic afuera.

$('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');
    }
    });
});

Estaba teniendo problemas con la solución de mattdlockyer porque estaba configurando enlaces popover dinámicamente usando un código como este:

$('body').popover({
        selector : '[rel="popover"]'
});

Así que tuve que modificarlo así. Me solucionó muchos problemas:

$('html').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('destroy');
    }
  });
});

Recuerde que destruir elimina el elemento, por lo que la parte del selector es importante para inicializar los popovers.