Popovers

Dokumentasi dan contoh untuk menambahkan popover Bootstrap, seperti yang terdapat dalam iOS, pada mana-mana elemen di tapak anda.

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.
• Jika anda sedang membina JavaScript kami daripada sumber, ia memerlukanutil.js .
• 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 adalah dengan memilihnya mengikut data-toggleatributnya:

$(function () {
  $('[data-toggle="popover"]').popover()
})

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.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Contoh

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-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.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-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-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  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 pembungkus <div>atau <span>dan mengatasi pointer-eventspada elemen yang dilumpuhkan.

Untuk pencetus popover yang dilumpuhkan, anda juga boleh memilih data-trigger="hover"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" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Penggunaan

Dayakan popovers melalui JavaScript:

$('#example').popover(options)

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-animation="".

Kaedah

$().popover(options)

Memulakan popover untuk koleksi elemen.

.popover('show')

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.

$('#element').popover('show')

.popover('hide')

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

$('#element').popover('hide')

.popover('toggle')

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.

$('#element').popover('toggle')

.popover('dispose')

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

$('#element').popover('dispose')

.popover('enable')

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

$('#element').popover('enable')

.popover('disable')

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

$('#element').popover('disable')

.popover('toggleEnabled')

Togol keupayaan untuk popover elemen untuk ditunjukkan atau disembunyikan.

$('#element').popover('toggleEnabled')

.popover('update')

Mengemas kini kedudukan popover elemen.

$('#element').popover('update')

Peristiwa

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})