Possiamo far sì che i popover siano liquidabili allo stesso modo dei modali, ad es. farli chiudere quando l'utente fa clic da qualche parte al di fuori di loro?

Sfortunatamente non posso semplicemente usare il vero modale invece del popover, perché modale significa posizione: fisso e non sarebbe più un popover. :(

Aggiornamento: una soluzione leggermente più robusta: http://jsfiddle.net/mattdlockyer/C5GBU/72/

Per i pulsanti che contengono solo testo:

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

Per l'uso di pulsanti contenenti icone (questo codice presenta un bug in Bootstrap 3.3.6, vedere la correzione di seguito in questa risposta)

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

Per Popovers generati da JS Utilizzare '[data-original-title]'al posto di'[data-toggle="popover"]'

Avvertenza: la soluzione di cui sopra consente di aprire più popover contemporaneamente.

Una sosta alla volta per favore:

Aggiornamento: Bootstrap 3.0.x, vedi codice o violino 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');
        }
    });
});

Gestisce la chiusura di popover già aperti e non cliccati o i cui collegamenti non sono stati cliccati.

Aggiornamento: Bootstrap 3.3.6, vedi violino

Risolve il problema per cui, dopo la chiusura, richiede 2 clic per riaprire

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

    });
});

Aggiornamento: utilizzando la condizione del miglioramento precedente, questa soluzione è stata raggiunta. Risolvi il problema del doppio clic e del 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');
        });
    }
});

Ciò chiude tutti i popover se si fa clic in un punto qualsiasi tranne che in un popover

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

Versione più semplice, più sicura , funziona con qualsiasi versione bootstrap.

Demo: http://jsfiddle.net/guya/24mmM/

Demo 2: non eliminare quando si fa clic all'interno del contenuto del popover http://jsfiddle.net/guya/fjZja/

Demo 3: Popovers multipli: http://jsfiddle.net/guya/6YCjW/

Chiamare semplicemente questa linea per eliminare tutti i popover:

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

Chiudi tutti i popover facendo clic all'esterno con questo codice:

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

Lo snippet qui sopra allega un evento click sul corpo. Quando l'utente fa clic su un popover, si comporterà normalmente. Quando l'utente fa clic su qualcosa che non è un popover, chiuderà tutti i popover.

Funzionerà anche con i popover che sono stati avviati con Javascript, al contrario di altri esempi che non funzioneranno. (vedi la demo)

Se non vuoi chiudere quando fai clic all'interno del contenuto del popover, usa questo codice (vedi link alla seconda demo):

$('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 puoi impostare il trigger su 'focus' e funziona:

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

Fondamentalmente questo non è molto complesso, ma ci sono alcuni controlli da fare per evitare problemi.

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

Nessuna delle supposte soluzioni di alto livello ha funzionato correttamente per me. Ognuno porta ad un bug quando dopo aver aperto e chiuso (facendo clic su altri elementi) il popover per la prima volta, non si riapre, fino a quando non ne fai due clic sul collegamento di attivazione anziché uno.

Quindi l'ho modificato leggermente:

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

Ho creato un jsfiddle per mostrarti come farlo:

http://jsfiddle.net/3yHTH/

L'idea è di mostrare il popover quando si fa clic sul pulsante e di nascondere il popover quando si fa clic all'esterno del pulsante.

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

aggiungi semplicemente questo attributo con l'elemento

data-trigger="focus"

Questo è stato chiesto prima qui . La stessa risposta che ho dato quindi vale ancora:

Avevo un bisogno simile e ho trovato questa piccola grande estensione del Twitter Bootstrap Popover di Lee Carmichael, chiamato BootstrapX - clickover . Ha anche alcuni esempi di utilizzo qui . Fondamentalmente cambierà il popover in un componente interattivo che si chiuderà quando clicchi altrove sulla pagina o su un pulsante di chiusura all'interno del popover. Ciò consentirà inoltre di aprire più popover contemporaneamente e un sacco di altre belle funzionalità.

È tardi per la festa ... ma ho pensato di condividerlo. Adoro il popover ma ha così poche funzionalità integrate. Ho scritto un'estensione bootstrap .bubble () che è tutto ciò che vorrei che fosse popover. Quattro modi per licenziare. Fai clic all'esterno, attiva o disattiva il collegamento, fai clic sulla X e premi Esc.

Si posiziona automaticamente in modo da non andare mai fuori dalla pagina.

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

Questa non è un'auto promo gratuita ... Ho afferrato il codice di altre persone così tante volte nella mia vita, volevo offrire i miei sforzi. Fai un giro rapido e vedi se funziona per te.

Secondo http://getbootstrap.com/javascript/#popovers ,

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

Utilizzare il trigger di messa a fuoco per eliminare i popover al clic successivo eseguito dall'utente.

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

Soluzione accettata modificata. Quello che ho sperimentato è che dopo che alcuni popover erano stati nascosti, dovevano essere cliccati due volte per mostrarsi di nuovo. Ecco cosa ho fatto per assicurarmi che popover ('hide') non venisse chiamato su popover già nascosti.

$('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 aggiungere questo attributo all'elemento html per chiudere popover nel prossimo clic.

data-trigger="focus"

riferimento da https://getbootstrap.com/docs/3.3/javascript/#popovers

Questa soluzione funziona perfettamente:

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

Puoi anche utilizzare il bubbling di eventi per rimuovere il popup dal DOM. È un po 'sporco, ma funziona bene.

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

Nel tuo html aggiungi la classe .popover-close al contenuto all'interno del popover che dovrebbe chiudere il popover.

Sembra che il metodo "nascondi" non funzioni se si crea il popover con la delega del selettore, invece si deve usare "distruggi".

L'ho fatto funzionare così:

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

JSfondo qui

Abbiamo scoperto di avere un problema con la soluzione di @mattdlockyer (grazie per la soluzione!). Quando si utilizza la proprietà selector per il costruttore popover in questo modo ...

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

... la soluzione proposta per BS3 non funzionerà. Invece crea una seconda istanza di popover locale alla sua $(this). Ecco la nostra soluzione per evitare che:

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

Come accennato, $(this).popover('hide');verrà creata una seconda istanza a causa del listener delegato. La soluzione fornita nasconde solo i popover che sono già stati istanziati.

Spero di potervi risparmiare ragazzi un po 'di tempo.

Bootstrap supporta nativamente questo :

Demo Bin JS

Markup specifico richiesto per il licenziamento al clic successivo

Per un corretto comportamento tra browser e multipiattaforma, è necessario utilizzare il <a>tag, non il <button>tag, nonché includere gli attributi role="button"e tabindex.

questa soluzione elimina il fastidioso secondo clic quando mostra il popover per la seconda volta

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

Ho provato molte delle risposte precedenti, davvero niente funziona per me ma questa soluzione ha fatto:

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

Raccomandano di usare il tag anchor not button e di occuparsi degli attributi 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>

Ho pensato a questo: il mio scenario includeva più popover nella stessa pagina e nasconderli li rendeva semplicemente invisibili e per questo motivo non era possibile fare clic sugli oggetti dietro il popover. L'idea è di contrassegnare il collegamento popover specifico come "attivo" e quindi è possibile semplicemente "attivare" il popover attivo. In questo modo il popover verrà chiuso 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"

Rimuovo solo altri popover attivi prima che venga mostrato il nuovo popover (bootstrap 3):

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

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

testato con 3.3.6 e il secondo clic è 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;
});

}

questa è la mia soluzione per questo.

Questo approccio consente di chiudere un popover facendo clic in qualsiasi punto della pagina. Se fai clic su un'altra entità cliccabile, nasconde tutti gli altri popover. L'animazione: false è necessaria altrimenti si otterrà un errore jquery .remove nella 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, questo è il mio primo tentativo di rispondere a qualcosa su StackOverflow, quindi qui non c'è nulla: P

Sembra che non sia del tutto chiaro che questa funzionalità funzioni davvero pronta all'uso sull'ultimo bootstrap (beh, se sei disposto a scendere a compromessi dove l'utente può fare clic. Non sono sicuro se devi mettere "clic" passa il mouse di per sé ma su un iPad, fare clic su funziona come un interruttore.

Il risultato finale è che su un desktop è possibile passare con il mouse o fare clic (la maggior parte degli utenti passa il mouse). Su un dispositivo touch, toccando l'elemento verrà visualizzato e toccandolo di nuovo verrà rimosso. Naturalmente, questo è un leggero compromesso rispetto al requisito originale, ma almeno il tuo codice è ora più pulito :)

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

Prendendo il codice di Matt Lockyer, ho fatto un semplice reset in modo che il dom non venga coperto dall'elemento hide.

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

Prova questo, questo si nasconderà facendo clic all'esterno.

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

Avevo problemi con la soluzione di mattdlockyer perché stavo configurando dinamicamente i collegamenti popover usando un codice come questo:

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

Quindi ho dovuto modificarlo in questo modo. Ha risolto molti problemi per me:

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

Ricorda che distruggere elimina l'elemento, quindi la parte del selettore è importante per l'inizializzazione dei popover.