Popover

Ringkasan

Hal-hal yang perlu diketahui saat menggunakan plugin popover:

• Popover mengandalkan perpustakaan pihak ketiga Popper untuk penentuan posisi. Anda harus menyertakan popper.min.js sebelum bootstrap.js, atau menggunakan bootstrap.bundle.min.jsyang berisi Popper.
• Popover memerlukan plugin popover 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

Seperti disebutkan di atas, Anda harus menginisialisasi popover sebelum dapat digunakan. Salah satu cara untuk menginisialisasi semua popover pada halaman adalah dengan memilihnya berdasarkan data-bs-toggleatributnya, seperti:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Demo langsung

Kami menggunakan JavaScript yang mirip dengan cuplikan di atas untuk merender popover langsung berikut. Judul diatur melalui data-bs-titledan isi isi diatur melalui data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-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 pilihan: atas, kanan, bawah, dan kiri. Arah dicerminkan saat menggunakan Bootstrap di RTL. Atur data-bs-placementuntuk mengubah arah.

<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>

Kebiasaancontainer

Saat Anda memiliki beberapa gaya pada elemen induk yang mengganggu popover, Anda akan ingin menentukan kustom containersehingga HTML popover muncul di dalam elemen itu. Ini umum di tabel responsif, grup input, dan sejenisnya.

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

Situasi lain di mana Anda ingin menyetel kustom eksplisit containeradalah popover di dalam modal dialog , untuk memastikan popover itu sendiri ditambahkan ke modal. Ini sangat penting untuk popover yang berisi elemen interaktif – dialog modal akan menjebak fokus, jadi kecuali jika popover adalah elemen turunan dari modal, pengguna tidak akan dapat memfokuskan atau mengaktifkan elemen interaktif ini.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Popover khusus

Anda dapat menyesuaikan tampilan popover menggunakan variabel CSS . Kami menetapkan kelas khusus dengan data-bs-custom-class="custom-popover"cakupan tampilan khusus kami dan menggunakannya untuk menimpa beberapa variabel CSS lokal.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</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" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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>

CSS

Variabel

Sebagai bagian dari pendekatan variabel CSS Bootstrap yang berkembang, popover sekarang menggunakan variabel CSS lokal .popoveruntuk penyesuaian waktu nyata yang ditingkatkan. Nilai untuk variabel CSS diatur melalui Sass, jadi kustomisasi Sass juga masih didukung.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Variabel Sass

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Penggunaan

Aktifkan popover melalui JavaScript:

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

Pilihan

Karena opsi dapat diteruskan melalui atribut data atau JavaScript, Anda dapat menambahkan nama opsi ke data-bs-, seperti pada data-bs-animation="{value}". Pastikan untuk mengubah jenis huruf dari nama opsi dari “ camelCase ” menjadi “ kebab-case ” saat meneruskan opsi melalui atribut data. Misalnya, gunakan data-bs-custom-class="beautifier"alih-alih data-bs-customClass="beautifier".

Pada Bootstrap 5.2.0, semua komponen mendukung atribut data cadangan eksperimentaldata-bs-config yang dapat menampung konfigurasi komponen sederhana sebagai string JSON. Ketika suatu elemen memiliki data-bs-config='{"delay":0, "title":123}'dan data-bs-title="456"atribut, nilai akhir titleakan menjadi 456dan atribut data yang terpisah akan menimpa nilai yang diberikan pada data-bs-config. Selain itu, atribut data yang ada dapat menampung nilai JSON seperti data-bs-delay='{"show":0,"hide":150}'.

Menggunakan fungsi denganpopperConfig

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

Metode

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Acara

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