Podemos fazer com que os popovers sejam descartados da mesma maneira que os modais, ie. fechá-los quando o usuário clica em algum lugar fora deles?

Infelizmente, não posso simplesmente usar modal real em vez de popover, porque modal significa position: fixed e isso não seria mais popover. :(

Atualização: Uma solução um pouco mais robusta: http://jsfiddle.net/mattdlockyer/C5GBU/72/

Para botões que contêm apenas 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 botões que contenham uso de ícones (este código possui um bug no Bootstrap 3.3.6, consulte a correção abaixo nesta resposta)

$('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 gerados por JS Use '[data-original-title]'no lugar de'[data-toggle="popover"]'

Advertência: A solução acima permite que vários popovers sejam abertos ao mesmo tempo.

Um popover de cada vez, por favor:

Atualização: Bootstrap 3.0.x, consulte o código ou violão 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');
        }
    });
});

Isso lida com o fechamento de popovers já abertos e sem cliques ou seus links não foram clicados.

Atualização: Bootstrap 3.3.6, veja violino

Corrige o problema em que, após o fechamento, leva 2 cliques para reabrir

$(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
        }

    });
});

Atualização: Usando o condicionamento da melhoria anterior, esta solução foi alcançada. Corrija o problema de clique duplo e 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');
        });
    }
});

Isso fecha todos os popovers se você clicar em qualquer lugar, exceto em um popover

UPDATE 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");
        });
    }
});

A versão mais simples e mais segura contra falhas funciona com qualquer versão de inicialização.

Demonstração: http://jsfiddle.net/guya/24mmM/

Demo 2: Não dispensar ao clicar dentro do conteúdo popover http://jsfiddle.net/guya/fjZja/

Demo 3: popovers múltiplos: http://jsfiddle.net/guya/6YCjW/

Simplesmente chamar esta linha descartará todos os popovers:

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

Ignore todos os popovers ao clicar fora com este código:

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

O snippet acima anexa um evento de clique no corpo. Quando o usuário clicar em um popover, ele se comportará normalmente. Quando o usuário clicar em algo que não é popover, ele fechará todos os popovers.

Também funcionará com popovers iniciados com Javascript, em oposição a outros exemplos que não funcionarão. (veja a demonstração)

Se você não quiser dispensar ao clicar dentro do conteúdo popover, use este código (consulte o link para a 2ª demonstração):

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

Com o bootstrap 2.3.2, você pode definir o gatilho para 'foco' e ele simplesmente funciona:

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

Basicamente, isso não é muito complexo, mas há algumas verificações a serem feitas para evitar falhas.

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

Nenhuma das supostas soluções votadas funcionou corretamente para mim. Cada um deles leva a um erro quando, após abrir e fechar (clicando em outros elementos), o popover pela primeira vez, ele não abre novamente, até você clicar duas vezes no link de acionamento em vez de um.

Então eu modifiquei um pouco:

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

Eu criei um jsfiddle para mostrar como fazer:

http://jsfiddle.net/3yHTH/

A idéia é mostrar a popover quando você clica no botão e ocultar a popover quando você clica fora do botão.

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

basta adicionar este atributo com o elemento

data-trigger="focus"

Isso já foi solicitado aqui . A mesma resposta que eu dei então ainda se aplica:

Eu tinha uma necessidade semelhante e encontrei essa grande extensão do Popover Bootstrap do Twitter de Lee Carmichael, chamada BootstrapX - clickover . Ele também tem alguns exemplos de uso aqui . Basicamente, ele mudará a popover para um componente interativo que será fechado quando você clicar em outro lugar na página ou em um botão fechar dentro da popover. Isso também permitirá que vários popovers sejam abertos ao mesmo tempo e vários outros recursos interessantes.

É tarde para a festa ... mas pensei em compartilhar. Eu amo o popover, mas ele tem tão pouca funcionalidade embutida. Eu escrevi uma extensão de inicialização .bubble () que é tudo que eu gostaria que fosse o popover. Quatro maneiras de descartar. Clique fora, alterne no link, clique no X e pressione escape.

Ele é posicionado automaticamente para nunca sair da página.

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

Esta não é uma promoção pessoal gratuita ... Eu peguei o código de outras pessoas tantas vezes na minha vida que queria oferecer meus próprios esforços. Faça um giro e veja se funciona para você.

De acordo com 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 o gatilho de foco para descartar popovers no próximo clique que o usuário fizer.

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

Solução aceita modificada. O que eu experimentei foi que, depois que alguns popovers foram ocultados, eles precisavam ser clicados duas vezes para aparecer novamente. Aqui está o que eu fiz para garantir que o popover ('hide') não estivesse sendo chamado em popovers já 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
            }
        }
    });
});

Basta adicionar este atributo ao elemento html para fechar o popover no próximo clique.

data-trigger="focus"

referência de https://getbootstrap.com/docs/3.3/javascript/#popovers

Esta solução funciona bem:

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

Você também pode usar o bubbling do evento para remover o pop-up do DOM. Está um pouco sujo, mas funciona bem.

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

No seu html, adicione a classe .popover-close ao conteúdo dentro do popover que deve fechar o popover.

Parece que o método 'ocultar' não funciona se você criar o popover com delegação de seletor, em vez disso, 'destruir' deve ser usado.

Eu fiz funcionar assim:

$('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 aqui

Descobrimos que tivemos um problema com a solução em @mattdlockyer (obrigado pela solução!). Ao usar a propriedade seletor para o construtor popover como este ...

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

... a solução proposta para o BS3 não funcionará. Em vez disso, ele cria uma segunda instância popover local para ela $(this). Aqui está a nossa solução para impedir que:

$(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 mencionado, o $(this).popover('hide');criará uma segunda instância devido ao ouvinte delegado. A solução fornecida apenas oculta popovers que já são instanciados.

Espero poder poupar a vocês algum tempo.

O Bootstrap suporta nativamente isso :

JS Bin Demo

Marcação específica necessária para ignorar ao clicar

Para cross-browser adequada e comportamento multi-plataforma, você deve usar a <a>tag, não a <button>tag, e você também deve incluir o role="button"e tabindexatributos.

essa solução se livra do irritante segundo clique ao exibir a popover pela segunda vez

testado com o 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();                
        }
    });
});

Eu tentei muitas das respostas anteriores, realmente nada funciona para mim, mas esta solução funcionou:

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

Eles recomendam usar o botão de âncora não botão e cuidar dos 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>

Eu vim com isso: meu cenário incluía mais popovers na mesma página, e escondê-los apenas os tornava invisíveis e, por isso, clicar nos itens atrás do popover não era possível. A idéia é marcar o link popover específico como 'ativo' e, em seguida, você pode simplesmente 'alternar' o popover ativo. Fazer isso fechará o 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"

Acabei de remover outros pop-ups ativos antes que o novo pop-up seja exibido (auto-inicialização 3):

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

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

testado com 3.3.6 e o ​​segundo clique está ok

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

demo: 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 é a minha solução para isso.

Essa abordagem garante que você possa fechar uma pop-up clicando em qualquer lugar da página. Se você clicar em outra entidade clicável, ela oculta todos os outros popovers. A animação: false é necessária; caso contrário, você receberá um erro .remove no jquery no console.

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

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

Ok, esta é a minha primeira tentativa de realmente responder a algo no stackoverflow, então aqui não vale nada: P

Parece que não está claro que essa funcionalidade realmente funcione imediatamente na última inicialização (bem, se você estiver disposto a comprometer onde o usuário pode clicar. Não tenho certeza se você precisa colocar 'click passe o mouse por si só, mas em um iPad, o clique funciona como uma alternância.

O resultado final é que, em uma área de trabalho, você pode passar o mouse ou clicar (a maioria dos usuários passa o mouse). Em um dispositivo de toque, tocar no elemento o exibirá e, novamente, tocará nele. Obviamente, esse é um pequeno comprometimento em relação aos requisitos originais, mas pelo menos seu código agora está mais limpo :)

$ (". my-popover"). popover ({trigger: 'clique em passar o mouse'});

Tomando o código de Matt Lockyer, fiz uma redefinição simples para que o dom não seja coberto pelo elemento no hide.

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

Fiddle: 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');
        }
    });
});

Tente isso, isso será oculto clicando fora.

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

Eu estava tendo problemas com a solução mattdlockyer porque estava configurando links popover dinamicamente usando código como este:

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

Então eu tive que modificá-lo assim. Corrigiu muitos problemas para mim:

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

Lembre-se de que o destroy se livra do elemento, portanto a parte do seletor é importante na inicialização dos popovers.