Popovers

Gambaran keseluruhan

Perkara yang perlu diketahui apabila menggunakan pemalam popover:

• Popovers bergantung pada perpustakaan pihak ke-3 Popper untuk kedudukan. Anda mesti menyertakan popper.min.js sebelum bootstrap.js atau gunakan bootstrap.bundle.min.js/ bootstrap.bundle.jsyang mengandungi Popper agar popover berfungsi!
• Popovers memerlukan pemalam tooltip sebagai pergantungan.
• Popovers mengikut serta atas sebab prestasi, jadi anda mesti memulakannya sendiri .
• Panjang sifar titledan contentnilai tidak akan menunjukkan popover.
• Tentukan container: 'body'untuk mengelakkan masalah rendering dalam komponen yang lebih kompleks (seperti kumpulan input kami, kumpulan butang, dll).
• Mencetuskan popover pada elemen tersembunyi tidak akan berfungsi.
• Popover untuk .disabledatau disabledelemen mesti dicetuskan pada elemen pembalut.
• Apabila dicetuskan daripada sauh yang membalut berbilang baris, popover akan dipusatkan di antara lebar keseluruhan sauh. Gunakan .text-nowrappada <a>s anda untuk mengelakkan tingkah laku ini.
• Popover mesti disembunyikan sebelum elemen yang sepadan dialih keluar daripada DOM.
• Popover boleh dicetuskan terima kasih kepada elemen dalam DOM bayangan.

Teruskan membaca untuk melihat cara popover berfungsi dengan beberapa contoh.

Contoh: Dayakan popover di mana-mana sahaja

Satu cara untuk memulakan semua popover pada halaman ialah memilihnya mengikut 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 containerpilihan

Apabila anda mempunyai beberapa gaya pada elemen induk yang mengganggu popover, anda perlu menentukan tersuai containersupaya HTML popover muncul 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

Empat pilihan tersedia: dijajar atas, kanan, bawah dan kiri. Arah dicerminkan apabila menggunakan Bootstrap dalam 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>

Tolak pada klik seterusnya

Gunakan focuspencetus untuk mengetepikan popover pada klik seterusnya pengguna bagi elemen yang berbeza daripada elemen togol.

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

Elemen dengan disabledatribut tidak interaktif, bermakna pengguna tidak boleh menuding atau mengkliknya untuk mencetuskan popover (atau petua alat). Sebagai penyelesaian, anda perlu mencetuskan popover daripada pembalut <div>atau <span>, yang idealnya boleh difokuskan papan kekunci menggunakan tabindex="0".

Untuk pencetus popover yang dilumpuhkan, anda juga boleh memilih data-bs-trigger="hover focus"supaya popover muncul sebagai maklum balas visual segera kepada pengguna anda kerana mereka mungkin tidak menjangkakan untuk mengklik pada elemen yang dilumpuhkan.

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

Sass

Pembolehubah

$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

Dayakan popovers melalui JavaScript:

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

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-bs-, seperti dalam data-bs-animation="". Pastikan anda menukar jenis kes bagi nama pilihan daripada camelCase kepada kebab-case apabila menghantar pilihan melalui atribut data. Sebagai contoh, daripada 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
  }
})

Kaedah

tunjuk

Mendedahkan popover elemen. Kembali kepada pemanggil sebelum popover sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.popoverperistiwa berlaku). Ini dianggap sebagai "manual" pencetus popover. Popover yang tajuk dan kandungannya sama-sama panjang sifar tidak pernah dipaparkan.

myPopover.show()

bersembunyi

Menyembunyikan popover elemen. Kembali kepada pemanggil sebelum popover sebenarnya telah disembunyikan (iaitu sebelum hidden.bs.popoverperistiwa berlaku). Ini dianggap sebagai "manual" pencetus popover.

myPopover.hide()

togol

Menogol popover elemen. Kembali kepada pemanggil sebelum popover sebenarnya telah ditunjukkan atau disembunyikan (iaitu sebelum shown.bs.popoveratau hidden.bs.popoverperistiwa berlaku). Ini dianggap sebagai "manual" pencetus popover.

myPopover.toggle()

buang

Menyembunyikan dan memusnahkan popover elemen (Mengalih keluar data yang disimpan pada elemen DOM). Popover yang menggunakan perwakilan (yang dibuat menggunakan pilihan ) tidak selectorboleh dimusnahkan secara individu pada elemen pencetus keturunan.

myPopover.dispose()

membolehkan

Memberi popover elemen keupayaan untuk ditunjukkan. Popovers didayakan secara lalai.

myPopover.enable()

melumpuhkan

Mengalih keluar keupayaan untuk popover elemen untuk ditunjukkan. Popover hanya akan dapat ditunjukkan jika ia didayakan semula.

myPopover.disable()

toggleDidayakan

Togol keupayaan untuk popover elemen untuk ditunjukkan atau disembunyikan.

myPopover.toggleEnabled()

kemas kini

Mengemas kini kedudukan popover elemen.

myPopover.update()

getInstance

Kaedah statik yang membolehkan anda mendapatkan contoh popover yang dikaitkan dengan elemen DOM

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

getOrCreateInstance

Kaedah statik yang membolehkan anda mendapatkan contoh popover yang dikaitkan dengan elemen DOM, atau mencipta yang baharu sekiranya ia tidak dimulakan

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

Peristiwa

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