Popover

Ringkasan

Hal-hal yang perlu diketahui saat menggunakan plugin popover:

• Popover mengandalkan perpustakaan pihak ke-3 Popper untuk penentuan posisi. Anda harus menyertakan popper.min.js sebelum bootstrap.js atau menggunakan bootstrap.bundle.min.js/ bootstrap.bundle.jsyang berisi Popper agar popover berfungsi!
• Popover memerlukan plugin tooltip sebagai ketergantungan.
• Popover diikutsertakan karena alasan kinerja, jadi Anda harus menginisialisasinya sendiri .
• Panjang nol titledan contentnilai tidak akan pernah menampilkan popover.
• Tentukan container: 'body'untuk menghindari masalah rendering dalam komponen yang lebih kompleks (seperti grup input, grup tombol, dll.).
• Memicu popover pada elemen tersembunyi tidak akan berfungsi.
• Popover untuk .disabledatau disabledelemen harus dipicu pada elemen pembungkus.
• Saat dipicu dari jangkar yang membungkus beberapa garis, popover akan dipusatkan di antara lebar keseluruhan jangkar. Gunakan .text-nowrappada <a>s Anda untuk menghindari perilaku ini.
• Popover harus disembunyikan sebelum elemen terkaitnya dihapus dari DOM.
• Popover dapat dipicu berkat elemen di dalam shadow DOM.

Teruslah membaca untuk melihat bagaimana popover bekerja dengan beberapa contoh.

Contoh: Aktifkan popover di mana-mana

Salah satu cara untuk menginisialisasi semua popover pada halaman adalah dengan memilihnya berdasarkan data-bs-toggleatributnya:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Contoh: Menggunakan containeropsi

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

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Contoh

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Empat arah

Tersedia empat opsi: rata atas, kanan, bawah, dan kiri. Arah dicerminkan saat menggunakan Bootstrap di RTL.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Singkirkan pada klik berikutnya

Gunakan focuspemicu untuk menutup popover pada klik berikutnya pengguna dari elemen yang berbeda dari elemen sakelar.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

Elemen yang dinonaktifkan

Elemen dengan disabledatribut tidak interaktif, artinya pengguna tidak dapat mengarahkan atau mengkliknya untuk memicu popover (atau tooltip). Sebagai solusinya, Anda ingin memicu popover dari wrapper <div>atau <span>, idealnya membuat keyboard-focusable menggunakan tabindex="0".

Untuk pemicu popover yang dinonaktifkan, Anda juga dapat memilih data-bs-trigger="hover focus"agar popover muncul sebagai umpan balik visual langsung kepada pengguna Anda karena mereka mungkin tidak mengharapkan untuk mengklik elemen yang dinonaktifkan.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Kelancangan

Variabel

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Penggunaan

Aktifkan popover melalui JavaScript:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-bs-, seperti pada data-bs-animation="". Pastikan untuk mengubah jenis kasus dari nama opsi dari camelCase ke kebab-case saat meneruskan opsi melalui atribut data. Misalnya, alih-alih menggunakan data-bs-customClass="beautifier", gunakan data-bs-custom-class="beautifier".

Menggunakan fungsi denganpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Metode

menunjukkan

Mengungkapkan popover elemen. Kembali ke pemanggil sebelum popover benar-benar ditampilkan (yaitu sebelum shown.bs.popoveracara terjadi). Ini dianggap sebagai pemicu "manual" dari popover. Popover yang judul dan kontennya sama-sama panjangnya nol tidak pernah ditampilkan.

myPopover.show()

bersembunyi

Menyembunyikan popover elemen. Kembali ke pemanggil sebelum popover sebenarnya disembunyikan (yaitu sebelum hidden.bs.popoveracara terjadi). Ini dianggap sebagai pemicu "manual" dari popover.

myPopover.hide()

beralih

Mengalihkan popover elemen. Kembali ke pemanggil sebelum popover benar-benar ditampilkan atau disembunyikan (yaitu sebelum shown.bs.popoveratau hidden.bs.popoverperistiwa terjadi). Ini dianggap sebagai pemicu "manual" dari popover.

myPopover.toggle()

membuang

Menyembunyikan dan menghancurkan popover elemen (Menghapus data yang tersimpan di elemen DOM). Popover yang menggunakan delegasi (yang dibuat menggunakan opsi selector) tidak dapat dimusnahkan satu per satu pada elemen pemicu turunan.

myPopover.dispose()

memungkinkan

Memberikan popover elemen kemampuan untuk ditampilkan. Popover diaktifkan secara default.

myPopover.enable()

cacat

Menghapus kemampuan popover elemen untuk ditampilkan. Popover hanya akan dapat ditampilkan jika diaktifkan kembali.

myPopover.disable()

toggleDiaktifkan

Mengalihkan kemampuan popover elemen untuk ditampilkan atau disembunyikan.

myPopover.toggleEnabled()

memperbarui

Memperbarui posisi popover elemen.

myPopover.update()

dapatkan Instance

Metode statis yang memungkinkan Anda mendapatkan instance popover yang terkait dengan elemen DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Metode statis yang memungkinkan Anda mendapatkan instance popover yang terkait dengan elemen DOM, atau membuat yang baru jika tidak diinisialisasi

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Acara

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})