Saya memiliki tombol dari dokumentasi Bootstrap 4:

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

Dan di bawahnya ada metode:

$(function () {
  $('[data-toggle="popover"]').popover({
    container: 'body',
    trigger: 'click',
  })
})

Saat memeriksa HTML, saya dapat melihat bahwa ada div baru yang ditampilkan <div class="popover fade top in".. Yang tidak terlihat. Saat memeriksa elemen, ia memiliki kelas yang menyembunyikannya:

.fade:not(.show){
  opacity: 0;
}

Membatalkannya, menunjukkan popover sebagaimana dimaksud. Ada petunjuk, apa yang saya lakukan salah?

1
Dannz 28 Oktober 2019, 13:00

1 menjawab

Jawaban Terbaik

Masalahnya adalah dengan pemilihan kelas yang ada di popover. Seperti yang Anda nyatakan dengan benar .fade:not(.show) dimulai tetapi kelas Anda adalah <div class="popover fade top in"... Jadi masalahnya adalah menggunakan .in bukan .show. Jadi saya kira ada perbedaan versi, karena saya pikir popovers di bootstrap 3 dulu memiliki in sedangkan bootstrap 4 menggunakan show

Apakah Anda mengatur ini mungkin secara manual di suatu tempat menggunakan acara bootstrap? Atau mungkin Anda mengimpor versi bootstrap.js yang salah?

3
denns 28 Oktober 2019, 10:25