popover bootstrap tidak muncul di atas semua elemen

Saya bekerja di situs bootstrap dan setelah memperbarui ke bootstrap 2.2 dari 2.0 semuanya berfungsi kecuali popover.

Popover masih muncul dengan baik, tetapi mereka tidak muncul di atas semua elemen lainnya.

<div> // this sits on top of the popover. this did not happen before cleaning up scripts.
     <div>  //popover shows on top of this
          <div> //popover shows on top of this
               //link here with popover in it.
          </div>
     </div>
</div>

Adakah yang tahu mengapa perilaku popover berubah, atau bagaimana saya bisa memperbaikinya? Terima kasih.

Saya dapat menyelesaikan masalah dengan menetapkan data-container="body"pada elemen html

HTML contoh:

<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
    hover over me
</a>

JavaScript contoh:

$('your element').tooltip({ container: 'body' }) 

Ditemukan dari tautan ini: https://github.com/twitter/bootstrap/issues/5889

Ini bekerja untuk saya

$().popover({container: 'body'})

Saya baru saja mengalami situasi yang mirip dengan ini, melibatkan perpustakaan DataTables JQuery dengan menggulir diaktifkan.

Apa yang ternyata tidak ada hubungannya dengan indeks-Z, tetapi dengan salah satu div yang menyertakan properti CSS overflow ditetapkan sebagai tersembunyi.

Saya memperbaikinya dengan menambahkan acara ke elemen saya memicu popover yang juga mengubah properti overflow dari div yang bertanggung jawab menjadi terlihat.

Penyebab paling mungkin adalah bahwa konten yang ditampilkan di atas popover lebih tinggi z-index. Tanpa kode / gaya yang tepat, saya dapat menawarkan dua opsi:

Anda harus mencoba menentukan elemen yang tepat dengan inspektur web (biasanya F12 pada browser favorit Anda) dan periksa yang sebenarnya z-index.

Jika Anda menemukan nilai ini, Anda dapat mengaturnya lebih rendah dari popover yang secara z-index: 1010;default

Atau pendekatan lain, tidak sebaik, akan meningkatkan z-indexpopover. Anda dapat melakukannya baik dengan @zindexPopoverdi file Kurang atau langsung dengan menimpa

.popover {
    z-index: 1010; /* A value higher than 1010 that solves the problem */
}

Jika Anda tidak dapat menemukan solusi, Anda harus mencoba mereproduksi bug dalam sesuatu seperti jsfiddle ini - Anda mungkin akan menyelesaikan masalah saat mencoba untuk mendapatkan bug.

Saya memiliki masalah yang sama dengan 2 elemen tetap - meskipun heirachy indeks-z benar, tooltip bootstrap disembunyikan di belakang satu elemen dengan indeks-z yang lebih rendah.

Menambahkan data-container="body"menyelesaikan masalah dan sekarang berfungsi seperti yang diharapkan.

Jika data-container = "body" tidak berfungsi daripada mencoba dua properti lainnya:

data-container="body" style="z-index:1000; position:relative"

indeks-z harus menjadi batas maksimal.

<div class="testDiv">
<a tabindex = "-1" id="testPop" title="stuff" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-container=".testDiv">
 <i class="fa fa-info-circle"></i>
</a>

</div>

Jawaban di atas sangat membantu karena pengaturan nilai dalam data-container melakukan pekerjaan tetapi jika saya mengatur data-container = "body" maka itu tidak selaras dengan benar dalam kasus saya. Jadi saya menentukan kelas div induk popover dan itu bekerja dengan baik.

html

data-container = ". testDiv"

js

$ ("# testPop"). popover ({container: '.testDiv'})

Solusi terbaik ini jika Anda menggunakan angular uib-bootsrap adalah Menggunakan injeksi ketergantungan untuk $ uibTooltipProvider, Anda dapat mengubah cara tooltips dan popover berperilaku secara default untuk semua tooltips.

$uibTooltipProvider.options({
  appendToBody: true
});

$ uibTooltipProvider Melalui $ uibTooltipProvider, Anda dapat mengubah cara tooltips dan popovers berperilaku secara default; atribut di atas selalu diutamakan. Metode berikut tersedia:

setTriggers (obj) (Contoh: {'openTrigger': 'closeTrigger'}) - Memperpanjang pemetaan pemicu default yang disebutkan di atas dengan pemetaan Anda sendiri.

options (obj) - Memberikan sekumpulan default untuk atribut tooltip dan popover tertentu. Saat ini mendukung yang dengan lencana C.

Bertahun-tahun kemudian, tetapi seperti saya, orang lain mungkin mencari ini. Semua pembaruan mempertimbangkan, semua ini dapat diselesaikan dengan opsi inisialisasi yang benar, dalam JavaScript.

$('.tip').tooltip({
    boundary: 'viewport',
    placement: 'top',
    container:'body',
    sanitize: true,
    appendToBody: true
});

Pengaturan itu menyelesaikan semua masalah Mei. Saya memiliki tooltips yang berkedip-kedip, menunjukkan dengan benar hanya untuk setengah dari item di halaman, melompat dari atas ke kiri terus menerus, semua jenis keanehan. Tetapi dengan pengaturan itu semuanya terpecahkan. Semoga ini bisa membantu orang mencari.

Hanya menggunakan

$().popover({container: 'body'})

mungkin tidak cukup ketika menampilkan popover di atas modal BootstrapDialog, yang juga menggunakan tubuh sebagai wadah dan memiliki indeks-z yang lebih tinggi.

Saya datang dengan perbaikan ini yang menggunakan internal Bootstrap3 (mungkin tidak bekerja dengan 2.x / 4.x) tetapi sebagian besar instalasi Bootstrap modern adalah 3.x.

self.$anchor.on('shown.bs.popover', function(ev) {
    var tipCSS = self.$anchor.data('tipCSS');
    if (tipCSS !== undefined) {
        self.$anchor.data('bs.popover').$tip.css(tipCSS);
    }
    // ...
});

Seperti popover yang berbeda mungkin memiliki z-index yang berbeda, beberapa berada di bawah modal BootstrapDialog, sementara yang lain di atasnya.

Dalam kasus saya, saya harus menggunakan opsi templat popover dan menambahkan kelas css saya sendiri ke templat html:

        $("[data-toggle='popover']").popover(
          {
            container: 'body',
            template: '<div class="popover top-modal" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
       });

Css:

.top-modal {
  z-index: 99999;
}

Problem solved with data-container="body" and z-index
1->
<div class="button btn-align"
data-container="body"  
data-toggle="popover"
data-placement="top"
title="Top"
data-trigger="hover"
data-title-backcolor="#fff"
data-content="A top aligned popover is a really boring thing in the real 
life.">Top</div>
2->
.ggpopover.in {
z-index: 9999 !important;
}

  $('[data-toggle="popover"]').popover({
        placement: 'top',
        boundary: 'viewport',
        trigger: 'hover',
        html: true,
        content: function () {
            let content = $(this).attr("data-popover-content");
            return $(content).html();
        }
    });,



`placement`: 'top',
`boundary`: 'viewport'
both needed

Saat Anda memiliki beberapa gaya pada elemen induk yang mengganggu popover, Anda ingin menentukan wadah kustom sehingga HTML popover muncul di dalam elemen itu.

Misalnya katakanlah orang tua untuk popover adalah tubuh maka Anda dapat menggunakan.

    <a href="#" data-toggle="tooltip" data-container="body"> Popover One </a>

Kasus lain mungkin ketika popover ditempatkan di dalam beberapa elemen lain dan Anda ingin menunjukkan popover di atas elemen itu, maka Anda harus menentukan elemen itu dalam wadah data. mis: Misalkan, kita memiliki popover di dalam modal bootstrap dengan id sebagai 'modal-dua', maka Anda perlu mengatur 'wadah data' menjadi 'modal-dua'.

    <a href="#" data-toggle="tooltip" data-container="#modal-two"> Popover Two </a>

Ini mungkin ada hubungannya dengan daftar master indeks-z pada variabel.less. Secara umum, pastikan file variabel.less Anda benar dan mutakhir.