Bisakah kita membuat popover dapat diberhentikan dengan cara yang sama seperti modals, yaitu. membuat mereka tutup ketika pengguna mengklik suatu tempat di luar mereka?

Sayangnya saya tidak bisa hanya menggunakan modal nyata daripada popover, karena modal berarti posisi: tetap dan itu bukan popover lagi. :(

Pembaruan: Solusi yang sedikit lebih kuat: http://jsfiddle.net/mattdlockyer/C5GBU/72/

Untuk tombol yang hanya berisi teks:

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

Untuk tombol yang berisi ikon digunakan (kode ini memiliki bug di Bootstrap 3.3.6, lihat perbaikan di bawah dalam jawaban ini)

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

Untuk Penggunaan Popovers Generasi JS'[data-original-title]' sebagai pengganti'[data-toggle="popover"]'

Peringatan: Solusi di atas memungkinkan beberapa popover terbuka sekaligus.

Tolong satu popover sekaligus:

Pembaruan: Bootstrap 3.0.x, lihat kode atau biola 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');
        }
    });
});

Ini menangani penutupan popover yang sudah terbuka dan tidak diklik atau tautannya belum diklik.

Pembaruan: Bootstrap 3.3.6, lihat biola

Memperbaiki masalah di mana setelah penutupan, membutuhkan 2 klik untuk membuka kembali

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

    });
});

Pembaruan: Menggunakan persyaratan peningkatan sebelumnya, solusi ini tercapai. Perbaiki masalah klik ganda dan popover hantu:

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

Ini menutup semua popover jika Anda mengklik di mana saja kecuali pada popover

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

Versi paling sederhana, paling aman gagal , bekerja dengan versi bootstrap apa pun.

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

Demo 2: Tidak menolak ketika mengklik di dalam konten popover http://jsfiddle.net/guya/fjZja/

Demo 3: Beberapa popovers: http://jsfiddle.net/guya/6YCjW/

Cukup menelepon saluran ini akan mengabaikan semua popover:

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

Singkirkan semua popover saat mengklik di luar dengan kode ini:

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

Cuplikan di atas melampirkan acara klik di badan. Ketika pengguna mengklik sembulan, itu akan berperilaku seperti biasa. Ketika pengguna mengklik sesuatu yang bukan popover, ia akan menutup semua popover.

Ini juga akan berfungsi dengan popover yang diawali dengan Javascript, sebagai lawan dari beberapa contoh lain yang tidak akan berfungsi. (lihat demo)

Jika Anda tidak ingin mengabaikan ketika mengklik di dalam konten popover, gunakan kode ini (lihat tautan ke demo ke-2):

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

Dengan bootstrap 2.3.2 Anda dapat mengatur pemicu untuk 'fokus' dan hanya berfungsi:

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

Ini pada dasarnya tidak terlalu rumit, tetapi ada beberapa pemeriksaan yang harus dilakukan untuk menghindari gangguan.

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

Tidak ada solusi yang seharusnya dipilih untuk saya dengan benar. Masing-masing mengarah ke bug ketika setelah membuka dan menutup (dengan mengklik pada elemen lain) popover untuk pertama kalinya, itu tidak terbuka lagi, sampai Anda membuat dua klik pada tautan memicu bukan satu.

Jadi saya memodifikasinya sedikit:

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

Saya membuat jsfiddle untuk menunjukkan kepada Anda bagaimana melakukannya:

http://jsfiddle.net/3yHTH/

Idenya adalah untuk menunjukkan popover ketika Anda mengklik tombol dan untuk menyembunyikan popover ketika Anda mengklik di luar tombol.

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

cukup tambahkan atribut ini dengan elemen

data-trigger="focus"

Ini sudah ditanyakan sebelumnya di sini . Jawaban yang sama yang saya berikan kemudian masih berlaku:

Saya memiliki kebutuhan yang sama, dan menemukan ekstensi kecil yang bagus dari Popover Bootstrap Twitter oleh Lee Carmichael, yang disebut BootstrapX - clickover . Dia juga memiliki beberapa contoh penggunaan di sini . Pada dasarnya itu akan mengubah popover menjadi komponen interaktif yang akan ditutup ketika Anda mengklik di tempat lain pada halaman, atau pada tombol tutup di dalam popover. Ini juga akan memungkinkan beberapa popover terbuka sekaligus dan banyak fitur bagus lainnya.

Ini terlambat ke pesta ... tapi saya pikir saya akan membagikannya. Saya suka popover tetapi memiliki sedikit fungsi bawaan. Saya menulis ekstensi bootstrap .bubble () itulah yang saya inginkan sebagai popover. Empat cara untuk memberhentikan. Klik di luar, aktifkan tautan, klik X, dan tekan escape.

Ini posisi secara otomatis sehingga tidak pernah keluar halaman.

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

Ini bukan promo mandiri gratis ... Saya sudah sering mengambil kode orang lain dalam hidup saya, saya ingin menawarkan usaha saya sendiri. Berputar dan lihat apakah itu cocok untuk Anda.

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

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

Gunakan pemicu fokus untuk mengabaikan popover pada klik berikutnya yang dibuat pengguna.

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

Solusi yang diterima dimodifikasi. Apa yang saya alami adalah bahwa setelah beberapa popover disembunyikan, mereka harus diklik dua kali untuk muncul lagi. Inilah yang saya lakukan untuk memastikan popover ('hide') tidak dipanggil pada popover yang sudah tersembunyi.

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

Cukup tambahkan atribut ini ke elemen html untuk menutup popover di klik berikutnya.

data-trigger="focus"

referensi dari https://getbootstrap.com/docs/3.3/javascript/#popovers

Solusi ini berfungsi dengan baik:

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

Anda juga dapat menggunakan acara bubbling untuk menghapus sembulan dari DOM. Agak kotor, tetapi berfungsi dengan baik.

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

Di html Anda, tambahkan kelas .popover-close ke konten di dalam popover yang seharusnya menutup popover.

Tampaknya metode 'sembunyikan' tidak berfungsi jika Anda membuat popover dengan delegasi pemilih, alih-alih 'hancurkan' harus digunakan.

Saya membuatnya bekerja seperti itu:

$('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 di sini

Kami mengetahui bahwa kami memiliki masalah dengan solusi dari @mattdlockyer (terima kasih atas solusinya!). Saat menggunakan properti pemilih untuk konstruktor popover seperti ini ...

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

... solusi yang diusulkan untuk BS3 tidak akan berfungsi. Sebaliknya ia membuat contoh popover lokal untuk itu $(this). Inilah solusi kami untuk mencegah hal itu:

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

Sebagaimana disebutkan $(this).popover('hide');akan membuat contoh kedua karena pendengar yang didelegasikan. Solusi yang disediakan hanya menyembunyikan popover yang sudah diinstal.

Saya harap saya bisa menghemat waktu kalian.

Bootstrap secara alami mendukung ini :

Demo JS Bin

Markup khusus diperlukan untuk mengabaikan klik berikutnya

Untuk lintas-browser yang tepat dan perilaku cross-platform, Anda harus menggunakan <a>tag, bukan yang<button> tag, dan Anda juga harus menyertakan role="button"dan tabindexatribut.

solusi ini menghilangkan klik 2 sial saat menampilkan popover untuk kedua kalinya

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

Saya sudah mencoba banyak jawaban sebelumnya, benar-benar tidak ada yang berhasil untuk saya tetapi solusi ini berhasil:

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

Mereka merekomendasikan untuk menggunakan jangkar tag bukan tombol dan merawat role = "button" + data-trigger = "focus" + tabindex = "0" atribut.

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>

Saya datang dengan ini: Skenario saya termasuk popover lebih banyak pada halaman yang sama, dan menyembunyikan mereka hanya membuat mereka tidak terlihat dan karena itu, mengklik item di belakang popover itu tidak mungkin. Idenya adalah untuk menandai tautan popover tertentu sebagai 'aktif' dan kemudian Anda cukup 'beralih' popover aktif. Melakukannya akan menutup popover sepenuhnya $ ('. 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"

Saya hanya menghapus popover aktif lainnya sebelum popover baru ditampilkan (bootstrap 3):

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

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

diuji dengan 3.3.6 dan klik kedua 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;
});

}

ini solusi saya untuk itu.

Pendekatan ini memastikan bahwa Anda dapat menutup popover dengan mengklik di mana saja pada halaman. Jika Anda mengklik entitas yang dapat diklik lainnya, ia menyembunyikan semua popover lainnya. Animasi: false diperlukan jika tidak, Anda akan mendapatkan kesalahan .hapus di konsol Anda.

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

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

Ok ini adalah upaya pertama saya untuk benar-benar menjawab sesuatu di stackoverflow jadi begini saja: P

Tampaknya tidak terlalu jelas bahwa fungsi ini sebenarnya bekerja di luar kotak pada bootstrap terbaru (well, jika Anda bersedia berkompromi di mana pengguna dapat mengklik. Saya tidak yakin apakah Anda harus meletakkan klik ' arahkan kursor per-se tetapi di iPad, klik berfungsi sebagai sakelar.

Hasil akhirnya adalah, pada desktop Anda dapat mengarahkan atau mengklik (sebagian besar pengguna akan mengarahkan). Pada perangkat sentuh, menyentuh elemen akan memunculkannya, dan menyentuhnya lagi akan menjatuhkannya. Tentu saja, ini adalah sedikit kompromi dari persyaratan awal Anda, tetapi setidaknya kode Anda sekarang lebih bersih :)

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

Mengambil kode Matt Lockyer, saya telah melakukan reset sederhana sehingga dom tidak tercakup oleh elemen di hide.

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

Coba ini, ini akan disembunyikan dengan mengklik di luar.

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

Saya mengalami masalah dengan solusi mattdlockyer karena saya mengatur tautan popover secara dinamis menggunakan kode seperti ini:

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

Jadi saya harus memodifikasinya seperti itu. Itu memperbaiki banyak masalah bagi saya:

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

Ingat bahwa menghancurkan menghilangkan elemen, sehingga bagian pemilih penting untuk menginisialisasi popover.