Source

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 pustaka pihak ke-3 Popper.js untuk kedudukan. Anda mesti menyertakan popper.min.js sebelum bootstrap.js atau gunakan bootstrap.bundle.min.js/ bootstrap.bundle.jsyang mengandungi Popper.js 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.

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-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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

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

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

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

Tolak pada klik seterusnya

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

Penanda khusus diperlukan untuk dismiss-on-next-click

Untuk kelakuan merentas penyemak imbas dan merentas platform yang betul, anda mesti menggunakan <a>teg, bukan teg<button> , dan anda juga mesti menyertakan tabindexatribut.

Popover boleh diketepikan 
<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)

Pilihan

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

Nama taip Lalai Penerangan
animasi boolean benar Gunakan peralihan pudar CSS ke popover
bekas rentetan | unsur | salah salah

Menambah popover pada elemen tertentu. Contoh: container: 'body'. Pilihan ini amat berguna kerana ia membolehkan anda meletakkan popover dalam aliran dokumen berhampiran elemen pencetus - yang akan menghalang popover daripada terapung daripada elemen pencetus semasa saiz semula tetingkap.
kandungan rentetan | unsur | fungsi ''

Nilai kandungan lalai jika data-contentatribut tidak ada.

Jika fungsi diberikan, ia akan dipanggil dengan thisset rujukannya kepada elemen yang dilampirkan popover.
kelewatan nombor | objek 0

Kelewatan menunjukkan dan menyembunyikan popover (ms) - tidak digunakan untuk jenis pencetus manual

Jika nombor dibekalkan, kelewatan dikenakan pada kedua-dua sembunyi/tunjukkan

Struktur objek ialah:delay: { "show": 500, "hide": 100 }
html boolean salah Masukkan HTML ke dalam popover. Jika palsu, jQuery'stext kaedah jQuery akan digunakan untuk memasukkan kandungan ke dalam DOM. Gunakan teks jika anda bimbang tentang serangan XSS.
penempatan rentetan | fungsi 'betul'

Bagaimana untuk meletakkan popover - auto | atas | bawah | kiri | betul.
Bilaauto ditentukan, ia akan mengorientasikan semula popover secara dinamik.

Apabila fungsi digunakan untuk menentukan peletakan, ia dipanggil dengan nod DOM popover sebagai hujah pertamanya dan nod DOM elemen pencetus sebagai yang kedua. Konteks ditetapkan thiskepada contoh popover.
pemilih rentetan | salah salah Jika pemilih disediakan, objek popover akan diwakilkan kepada sasaran yang ditentukan. Dalam amalan, ini digunakan untuk membolehkan kandungan HTML dinamik mempunyai popover ditambah. Lihat ini dan contoh bermaklumat .
templat tali '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML asas untuk digunakan semasa membuat popover.

Popover titleakan disuntik ke dalam .popover-header.

Popover contentakan disuntik ke dalam .popover-body.

.arrowakan menjadi anak panah popover.

Elemen pembungkus paling luar harus mempunyai .popoverkelas.
tajuk rentetan | unsur | fungsi ''

Nilai tajuk lalai jika titleatribut tidak ada.

Jika fungsi diberikan, ia akan dipanggil dengan thisset rujukannya kepada elemen yang dilampirkan popover.
pencetus tali 'klik' Cara popover dicetuskan - klik | tuding | tumpuan | manual. Anda boleh melepasi pelbagai pencetus; pisahkan mereka dengan ruang. manualtidak boleh digabungkan dengan mana-mana pencetus lain.
mengimbangi nombor | tali 0 Mengimbangi popover berbanding sasarannya. Untuk maklumat lanjut rujuk dokumen offset Popper.js .
fallbackPlacement rentetan | tatasusunan 'terbalik' Benarkan untuk menentukan kedudukan yang Popper akan gunakan pada sandaran. Untuk maklumat lanjut rujuk kepada dokumen tingkah laku Popper.js
sempadan rentetan | unsur 'scrollParent' Sempadan kekangan limpahan popover. Menerima nilai 'viewport', 'window', 'scrollParent', atau rujukan HTMLElement (JavaScript sahaja). Untuk maklumat lanjut rujuk dokumen preventOverflow Popper.js .

Atribut data untuk popover individu

Pilihan untuk popover individu boleh ditentukan secara alternatif melalui penggunaan atribut data, seperti yang dijelaskan di atas.

Kaedah

Kaedah dan peralihan tak segerak

Semua kaedah API adalah tak segerak dan mulakan peralihan . Mereka kembali kepada pemanggil sebaik sahaja peralihan dimulakan tetapi sebelum ia tamat . Selain itu, panggilan kaedah pada komponen peralihan akan diabaikan .

Lihat dokumentasi JavaScript kami untuk mendapatkan maklumat lanjut.

$().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 kedua-dua tajuk dan kandungannya adalah sifar panjang 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')

Mengeluarkan 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

Jenis acara Penerangan
show.bs.popover Peristiwa ini menyala serta-merta apabila showkaedah contoh dipanggil.
ditunjukkan.bs.popover Acara ini dicetuskan apabila popover telah dilihat kepada pengguna (akan menunggu peralihan CSS selesai).
hide.bs.popover Peristiwa ini dicetuskan serta-merta apabila hidekaedah contoh telah dipanggil.
hidden.bs.popover Acara ini dicetuskan apabila popover telah selesai disembunyikan daripada pengguna (akan menunggu peralihan CSS selesai).
disisipkan.bs.popover Acara ini dicetuskan selepas show.bs.popoveracara apabila templat popover telah ditambahkan pada DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})