Source

Popover

Dokumentasi dan contoh untuk menambahkan popover Bootstrap, seperti yang ditemukan di iOS, ke elemen apa pun di situs Anda.

Ringkasan

Hal-hal yang perlu diketahui saat menggunakan plugin popover:

  • Popover mengandalkan perpustakaan pihak ke-3 Popper.js untuk penentuan posisi. Anda harus menyertakan popper.min.js sebelum bootstrap.js atau menggunakan bootstrap.bundle.min.js/ bootstrap.bundle.jsyang berisi Popper.js agar popover berfungsi!
  • Popover memerlukan plugin tooltip sebagai ketergantungan.
  • Jika Anda membuat JavaScript kami dari sumber, itu memerlukanutil.js .
  • 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-nowrapdi <a>s Anda untuk menghindari perilaku ini.
  • Popover harus disembunyikan sebelum elemen terkaitnya dihapus dari 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-toggleatributnya:

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

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.

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

Tersedia empat opsi: rata 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>

Singkirkan pada klik berikutnya

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

Markup khusus diperlukan untuk pemberhentian-pada-klik-berikutnya

Untuk perilaku lintas-browser dan lintas-platform yang tepat, Anda harus menggunakan <a>tag, bukan tag <button>, dan Anda juga harus menyertakan tabindexatribut.

Popover yang dapat ditutup 
<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 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 pembungkus <div>atau <span>dan menimpa pointer-eventselemen yang dinonaktifkan.

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

Penggunaan

Aktifkan popover melalui JavaScript:

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

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-animation="".

Nama Jenis Bawaan Keterangan
animasi boolean BENAR Terapkan transisi fade CSS ke popover
wadah string | elemen | Salah Salah

Menambahkan popover ke elemen tertentu. Contoh: container: 'body'. Opsi ini sangat berguna karena memungkinkan Anda untuk memposisikan popover dalam aliran dokumen di dekat elemen pemicu - yang akan mencegah popover melayang menjauh dari elemen pemicu selama pengubahan ukuran jendela.
isi string | elemen | fungsi ''

Nilai konten default jika data-contentatribut tidak ada.

Jika suatu fungsi diberikan, itu akan dipanggil dengan thisreferensi yang disetel ke elemen tempat popover dilampirkan.
menunda nomor | obyek 0

Penundaan menampilkan dan menyembunyikan popover (ms) - tidak berlaku untuk tipe pemicu manual

Jika nomor diberikan, penundaan diterapkan pada kedua sembunyikan/tampilkan

Struktur objek adalah:delay: { "show": 500, "hide": 100 }
html boolean Salah Masukkan HTML ke dalam popover. Jika salah, metode jQuery textakan digunakan untuk memasukkan konten ke dalam DOM. Gunakan teks jika Anda khawatir tentang serangan XSS.
penempatan string | fungsi 'Baik'

Cara memposisikan popover - otomatis | atas | bawah | kiri | Baik.
Ketika autoditentukan, itu akan secara dinamis mengorientasikan ulang popover.

Ketika suatu fungsi digunakan untuk menentukan penempatan, itu dipanggil dengan simpul DOM popover sebagai argumen pertamanya dan elemen pemicu simpul DOM sebagai argumen kedua. Konteks thisdiatur ke instance popover.
pemilih string | Salah Salah Jika pemilih disediakan, objek popover akan didelegasikan ke target yang ditentukan. Dalam praktiknya, ini digunakan untuk mengaktifkan konten HTML dinamis agar popover ditambahkan. Lihat ini dan contoh yang informatif .
templat rangkaian '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Dasar HTML untuk digunakan saat membuat popover.

Popover titleakan disuntikkan ke file .popover-header.

Popover contentakan disuntikkan ke file .popover-body.

.arrowakan menjadi panah popover.

Elemen pembungkus terluar harus memiliki .popoverkelas.
judul string | elemen | fungsi ''

Nilai judul default jika titleatribut tidak ada.

Jika suatu fungsi diberikan, itu akan dipanggil dengan thisreferensi yang disetel ke elemen tempat popover dilampirkan.
pemicu rangkaian 'klik' Bagaimana popover dipicu - klik | melayang | fokus | manual. Anda dapat melewati beberapa pemicu; pisahkan dengan spasi. manualtidak dapat digabungkan dengan pemicu lainnya.
mengimbangi nomor | rangkaian 0 Offset popover relatif terhadap targetnya. Untuk informasi lebih lanjut, lihat dokumen offset Popper.js .
fallbackPenempatan string | Himpunan 'Balik' Izinkan untuk menentukan posisi mana yang akan digunakan Popper saat mundur. Untuk informasi lebih lanjut, lihat dokumen perilaku Popper.js
batas string | elemen 'scrollInduk' Batas kendala overflow dari popover. Menerima nilai 'viewport', 'window', 'scrollParent', atau referensi HTMLElement (khusus JavaScript). Untuk informasi lebih lanjut, lihat dokumen preventOverflow Popper.js .

Atribut data untuk popover individu

Opsi untuk popover individual dapat ditentukan secara alternatif melalui penggunaan atribut data, seperti yang dijelaskan di atas.

Metode

Metode dan transisi asinkron

Semua metode API tidak sinkron dan memulai transisi . Mereka kembali ke penelepon segera setelah transisi dimulai tetapi sebelum berakhir . Selain itu, pemanggilan metode pada komponen transisi akan diabaikan .

Lihat dokumentasi JavaScript kami untuk informasi lebih lanjut.

$().popover(options)

Menginisialisasi popover untuk koleksi elemen.

.popover('show')

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 nol-panjang tidak pernah ditampilkan.

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

.popover('hide')

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

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

.popover('toggle')

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.

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

.popover('dispose')

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

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

.popover('enable')

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

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

.popover('disable')

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

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

.popover('toggleEnabled')

Mengalihkan kemampuan popover elemen untuk ditampilkan atau disembunyikan.

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

.popover('update')

Memperbarui posisi popover elemen.

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

Acara

Jenis Acara Keterangan
show.bs.popover Acara ini langsung aktif ketika showmetode instance dipanggil.
ditampilkan.bs.popover Acara ini dipicu ketika popover telah dibuat terlihat oleh pengguna (akan menunggu transisi CSS selesai).
hide.bs.popover Acara ini dipecat segera ketika hidemetode instance telah dipanggil.
tersembunyi.bs.popover Acara ini dipicu ketika popover telah selesai disembunyikan dari pengguna (akan menunggu transisi CSS selesai).
dimasukkan.bs.popover Acara ini dipicu setelah show.bs.popoveracara ketika template popover telah ditambahkan ke DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})