Como descartar um popover do Twitter Bootstrap clicando fora?


289

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. :(



Tente este stackoverflow.com/a/40661543/5823517 . Não envolve looping através dos pais
Tunn

data-trigger="hover"e data-trigger="focus"são uma alternativa integrada para fechar a janela popover, se você não quiser usar a alternância. Na minha opinião, data-trigger="hover"fornece a melhor experiência do usuário ... não há necessidade de escrever código js extra de ...
Hooman Bahreini

Respostas:


461

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

2
Anexar ao $(document)invés de, $('body')pois às vezes o bodynão se estende por toda a página.
jasop

6
Depois de ativar o popover (e a ação oculta subsequente), o popover não fica completamente oculto; simplesmente não é visível. O problema é que o conteúdo sob o popover invisível e presente não pode ser clicado ou pairado. Problema ocorre na versão mais recente do Chrome, mais de bootstrap 3 js (poderia ser outros navegadores, bem como, não podia ser incomodado para verificar uma vez que esta solução alternativa deve ser exigido de qualquer maneira)
ravb79

6
Em vez de '[data-toggle="popover"]', que não funciona com popovers gerados por JavaScript, usei '[data-original-title]'como seletor.
Nathan

4
Alguém sabe por que essa solução não funciona com a versão mais recente do bootstrap? O seguinte está acontecendo: Clique no botão para exibir popover, clique no corpo para descartá-lo e clique no botão para mostrar popover e o popover não é exibido. Depois que falhar uma vez, se você clicar novamente, será exibido. É muito estranho.
JTunney

3
@JTunney Estou executando o BS 3.3.6 e ainda vejo esse comportamento em que são necessários dois cliques para abrir um popoever depois de descartar um.
Sersun # 22/16

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

Adicionei uma classe ao botão que aciona o popover (pop-btn) para que não seja incluído ... if (! $ (E.target) .closest ('. Popover'). Length &&! $ (E. alvo) .closest ( 'btn ') hasClass (' pop-btn')).
mozgras

2
com 3 botões popover, esse código cria problemas. em alguns casos, não consigo clicar no botão e os botões piscam.
OpenCode 02/01

1
Não é possível que esse código funcione ... verifique esse violino e adicione um violino à sua resposta. jsfiddle.net/C5GBU/102
mattdlockyer

Perfeito para mim. Outras respostas tiveram efeitos colaterais quando meu "clique externo" abriu um novo popover.
Relação Facio

Isso funciona muito bem, mas precisa haver uma maneira de adaptar isso para que, se você clicar no conteúdo do popover, ele não seja fechado. por exemplo, se você clicar no texto dentro de uma tag <b> dentro da popover ...
Ben no CA

40

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

3
Teve um problema semelhante e este trabalhou em Bootstrap 3.
wsams

Se você aproximar os popovers de maneira que eles se sobreponham, quando você oculta um popover clicando em algum lugar fora, um dos links para de funcionar. Confira: jsfiddle.net/qjcuyksb/1
Sandeep Giri

1
A última versão não funciona ao usar o bootstrap-datepicker no popover.
dbinott

1
Eu gostei desta solução da melhor maneira, porque a resposta aceita começou a ser um pouco complicada, com cerca de 30 pop
David G

1
Talvez !$(e.target).closest('.popover.in').lengthseja mais eficiente que !$(e.target).parents().is('.popover.in').
Joeytwiddle 3/03/16

19

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

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

1
+1, mas observação lateral importante: isso não fecha a janela pop-up, se você clicar novamente no botão ou na âncora, enquanto a resposta aceita o fecha.
Christian Gollhardt

18

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

2
este descarta o modal clicando em todos os lugares e não fora
hienbt88

É possível fazer isso com um popover()clique ao invés de passar o mouse?
Zaki Aziz

3
Claro, mas você precisa chamar stopPropagation()o evento passado para o manipulador de cliques (caso contrário, o manipulador oculto oculta imediatamente o popover). Demo (jsfiddle)
Sherbrow

Eu tenho a mesma funcionalidade abaixo em muito menos código. Esta resposta é inchada e um pouco ridícula para a pergunta ... Tudo o que ele quer é fechar popovers quando você clicar do lado de fora ... Isso é um exagero e FEIO!
mattdlockyer

2
Correção, acredito que tenho uma funcionalidade MELHOR em muito menos código. Pressupõe que você deseja que apenas um pop-up de cada vez seja visível. Se você gosta deste, por favor upvote minha resposta abaixo: jsfiddle.net/P3qRK/1 resposta: stackoverflow.com/a/14857326/1060487
mattdlockyer

16

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

1
Bom, está funcionando para mim. BTW você esqueceu a); no final do seu código depois da última}
Merlin

1
Teve o mesmo problema relacionado ao segundo clique. Essa deve ser a resposta à prova de falhas!
Felipe Leão

Eu também tentei as soluções anteriores acima, mas como uma orientação para aqueles que também procuram uma solução a partir de 2016, essa é uma solução melhor.
dariru

resposta superior, funciona como anunciado. como observado, outros não. esta deve ser a resposta superior
duggi

Funciona perfeitamente, exceto que eu não usei data-toggel = "popover". Mas você pode especificar qualquer seletor que corresponda aos seus elementos acionadores de popover. Solução agradável e a única que resolveu o problema de dois cliques para mim.
Shock_gone_wild 4/09/18

11

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

boa demonstração. Eu estou querendo saber como você poderia chamar popover no objeto Jquery, popover é um plugin js de bootstrap, mas você não inclui nenhum arquivo js de bootstrap lá?
bingjie2680

Há um arquivo js no jsfiddle. Veja a coluna da esquerda -> Gerenciar recursos.
Pigueiras 28/07/12

Ok, vejo que há um bootstrap js. mas não está marcado, ainda funciona?
bingjie2680

Sim, funciona. Enfim, eu procurei no google: jsfiddle bootstrape me deu o esqueleto do bootstrap css + js no jsfiddle.
Pigueiras 29/07

2
Meu único problema com isso é que você oculta a popover quando clica nela. É melhor usar apenas uma dica de ferramenta.
NoBrainer

7

basta adicionar este atributo com o elemento

data-trigger="focus"

Inicialmente, isso não funcionou para mim com o Bootstrap 3.3.7, mas depois li os documentos e eles têm algumas orientações que vale a pena mencionar aqui. No exemplo de pop-up não permitido nos documentos "Para um comportamento adequado entre navegadores e plataformas, você deve usar a tag <a>, não a <button>, além de incluir os atributos role =" button "e tabindex . "
15248 Jeff

3

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.


3

É 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ê.


3

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

2
Não funciona em navegadores Mac que seguem o comportamento nativo do OS X (que não foca nem desfoca os botões ao clicar). Isso inclui Firefox e Safari. Os caras do Bootstrap cometeram um grande erro aqui, pois esses popovers não podem nem ser abertos, e muito menos descartados.
Ante Vrli

2
@AnteVrli Talvez isso ainda não estivesse na documentação quando você escreveu seu comentário, mas agora os documentos dizem: "Para um comportamento adequado entre navegadores e plataformas, você deve usar a <a>tag, não a <button>tag, e também incluir os caracteres role="button"e tabindexatributos." Você tentou com essas especificações?
Louis

3
Bem, não é um problema com esta resposta, que não tem nada a ver com a compatibilidade com a plataforma: pressionando um botão do mouse dentro de um popover vai demitir o popover porque o elemento que desencadeia a popover vai perder o foco. Esqueça que os usuários possam copiar e colar de popovers: assim que o botão do mouse é pressionado, o popover é fechado. Se você tiver itens acionáveis ​​no popover (botões, links), os usuários não poderão usá-los.
Louis

Tanta coisa para 'plataforma cruzada', porque no bootstrap 4.0.0-beta e 4.0.0-beta.2 eu não consigo fazer isso funcionar no Mac no Chrome :(
rmcsharry

3

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


3

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

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

2

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.


2

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


2

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.


2

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.


No bootstrap 4.0.0-beta e 4.0.0-beta.2, não consigo fazer isso funcionar no Mac no Chrome :(
rmcsharry 28/17

Clicar em qualquer lugar fecha esse popover, o questionador exige "clicar fora do popover para fechar", o que é diferente.
Philw

2

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

2

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>


1

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"

1

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

1

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

0

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.


0

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

0

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


0

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

0

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

0

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.