in English

Popovers

Dokumentasi lan conto kanggo nambah popovers Bootstrap, kaya sing ditemokake ing iOS, menyang unsur apa wae ing situs sampeyan.

Ringkesan

Sing kudu dingerteni nalika nggunakake plugin popover:

  • Popovers gumantung ing perpustakaan pihak katelu Popper kanggo posisi. Sampeyan kudu nyakup popper.min.js sadurunge bootstrap.js utawa nggunakake bootstrap.bundle.min.js/ bootstrap.bundle.jssing ngemot Popper supaya popovers bisa digunakake!
  • Popovers mbutuhake plugin tooltip minangka ketergantungan.
  • Yen sampeyan lagi mbangun JavaScript saka sumber, mbutuhakeutil.js .
  • Popovers milih kanggo alasan kinerja, dadi sampeyan kudu miwiti dhewe .
  • Zero-dawa titlelan contentnilai ora bakal nuduhake popover.
  • Nemtokake container: 'body'kanggo ngindhari masalah rendering ing komponen sing luwih rumit (kayata grup input, grup tombol, lsp).
  • Micu popovers ing unsur sing didhelikake ora bakal bisa.
  • Popovers kanggo .disabledutawa disabledunsur kudu micu ing unsur wrapper.
  • Nalika dipicu saka jangkar sing mbungkus pirang-pirang baris, popover bakal dipusatake ing antarane jembar sakabèhé jangkar. Gunakake .text-nowraping <a>s kanggo supaya prilaku iki.
  • Popovers kudu didhelikake sadurunge unsur sing cocog wis dibusak saka DOM.
  • Popovers bisa micu thanks kanggo unsur nang bayangan DOM.
Kanthi gawan, komponen iki nggunakake sanitizer konten sing dibangun, sing ngilangi unsur HTML sing ora diidini sacara eksplisit. Deleng bagean sanitizer ing dokumentasi JavaScript kanggo rincian liyane.
Efek animasi saka komponen iki gumantung marang prefers-reduced-motionpitakon media. Deleng bagean gerakan suda saka dokumentasi aksesibilitas kita .

Tansah maca kanggo ndeleng carane popovers bisa digunakake karo sawetara conto.

Conto: Aktifake popovers ing endi wae

Salah siji cara kanggo miwiti kabeh popovers ing kaca yaiku milih kanthi data-toggleatribut:

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

Conto: Nggunakake containeropsi

Yen sampeyan duwe sawetara gaya ing unsur induk sing ngganggu popover, sampeyan pengin nemtokake adat containersupaya HTML popover katon ing unsur kasebut.

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

Tuladha

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

Papat arah

Papat opsi kasedhiya: ndhuwur, tengen, ngisor, lan kiwa didadekake siji.

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

Mbusak ing klik sabanjuré

Gunakake focuspemicu kanggo ngilangi popovers ing klik sabanjuré pangguna saka unsur beda saka unsur toggle.

Markup khusus dibutuhake kanggo ngilangi-on-next-click

Kanggo prilaku lintas-browser lan lintas-platform sing tepat, sampeyan kudu nggunakake <a>tag, dudu tag <button>, lan sampeyan uga kudu nyakup tabindexatribut.

<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'
})

Unsur dipatèni

Elemen karo disabledatribut ora interaktif, tegese pangguna ora bisa ngeklik utawa ngeklik kanggo micu popover (utawa tooltip). Minangka workaround, sampeyan bakal pengin micu popover saka pambungkus <div>utawa <span>lan ngganti ing pointer-eventsunsur dipatèni.

Kanggo pemicu popover sing dipatèni, sampeyan uga luwih seneng data-trigger="hover"supaya popover katon minangka umpan balik visual langsung kanggo pangguna amarga ora ngarep-arep ngeklik unsur sing dipatèni.

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

Panggunaan

Aktifake popovers liwat JavaScript:

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

Popovers kadhangkala katon burem ing Windows 10 piranti amarga akselerasi GPU lan DPI sistem sing diowahi. Solusi kanggo iki ing v4 yaiku mateni akselerasi GPU kaya sing dibutuhake ing popovers sampeyan.

Disaranake ndandani:

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

Nggawe popovers bisa digunakake kanggo pangguna keyboard lan teknologi assistive

Kanggo ngidini pangguna keyboard ngaktifake popover sampeyan, sampeyan mung kudu nambahake menyang unsur HTML sing biasane fokus keyboard lan interaktif (kayata pranala utawa kontrol formulir). Senajan unsur HTML kasepakatan (kayata <span>s) bisa digawe fokus kanthi nambah tabindex="0"atribut, iki bakal nambah potensi ngganggu lan mbingungake tab mandheg ing unsur non-interaktif kanggo pangguna keyboard, lan paling teknologi assistive saiki ora ngumumake isi popover ing kahanan iki. . Kajaba iku, aja ngandelake mung hoverminangka pemicu kanggo popovers sampeyan, amarga iki ora bisa dipicu kanggo pangguna keyboard.

Nalika sampeyan bisa nglebokake HTML sing sugih lan terstruktur ing popovers kanthi htmlpilihan, kita banget nyaranake supaya ora nambah konten sing akeh banget. Cara popovers saiki bisa digunakake yaiku, yen ditampilake, isi kasebut diikat karo unsur pemicu kanthi aria-describedbyatribut. Akibaté, kabeh isi popover bakal diumumake menyang pangguna teknologi asisten minangka aliran sing dawa lan tanpa gangguan.

Kajaba iku, nalika bisa uga kalebu kontrol interaktif (kayata unsur wangun utawa pranala) ing popover sampeyan (kanthi nambahake unsur kasebut menyang whiteListatribut lan tag sing diidinake), elinga yen saiki popover ora ngatur urutan fokus keyboard. Nalika pangguna keyboard mbukak popover, fokus tetep ing unsur pemicu, lan minangka popover biasane ora langsung ngetutake pemicu ing struktur dokumen, ora ana jaminan sing maju / menet.TABbakal mindhah pangguna keyboard menyang popover dhewe. Ing cendhak, mung nambah kontrol interaktif kanggo popover kamungkinan kanggo nggawe kontrol iki ora bisa diakses / ora bisa digunakake kanggo pangguna keyboard lan pangguna teknologi assistive, utawa paling ora nggawe urutan fokus sakabehe ora logis. Ing kasus iki, nimbang nggunakake dialog modal tinimbang.

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-animation="".

Elinga yen kanggo alasan keamanan opsi sanitize, sanitizeFnlan whiteListora bisa diwenehake nggunakake atribut data.
jeneng Jinis Default Katrangan
animasi boolean bener Aplikasi transisi fade CSS menyang popover
wadhah senar | unsur | palsu palsu

Nambahake popover menyang unsur tartamtu. Tuladha: container: 'body'. Opsi iki migunani banget amarga ngidini sampeyan nyetel popover ing aliran dokumen ing cedhak unsur pemicu - sing bakal nyegah popover saka ngambang saka unsur pemicu nalika ngowahi ukuran jendhela.

isi senar | unsur | fungsi ''

Nilai isi standar yen data-contentatribut ora ana.

Yen fungsi diwenehi, iku bakal disebut karo thisreferensi disetel kanggo unsur sing popover ditempelake.

tundha nomer | obyek 0

Tundha nuduhake lan ndhelikake popover (ms) - ora ditrapake kanggo jinis pemicu manual

Yen nomer diwenehake, wektu tundha ditrapake kanggo ndhelikake / nuduhake

Struktur obyek yaiku:delay: { "show": 500, "hide": 100 }

html boolean palsu Lebokake HTML menyang popover. Yen palsu, textcara jQuery bakal digunakake kanggo nglebokake isi menyang DOM. Gunakake teks yen sampeyan kuwatir babagan serangan XSS.
panggonan panggonan senar | fungsi 'bener'

Carane posisi popover - otomatis | ndhuwur | ngisor | kiwa | bener.
Nalika autowis ditemtokake, iku bakal mbosenke reorient popover.

Nalika fungsi digunakake kanggo nemtokake panggonan seko, diarani simpul DOM popover minangka argumen pisanan lan unsur pemicu DOM node minangka kaloro. Konteks thisdisetel menyang conto popover.

pamilih senar | palsu palsu Yen pamilih diwenehake, obyek popover bakal didelegasikan menyang target sing ditemtokake. Ing laku, iki digunakake kanggo ngaktifake isi HTML dinamis kanggo nambah popovers. Waca iki lan conto informatif .
cithakan senar '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML dhasar kanggo digunakake nalika nggawe popover.

Popover titlebakal disuntikake menyang .popover-header.

Popover contentbakal disuntikake menyang .popover-body.

.arrowbakal dadi panah popover.

Unsur pambungkus paling njaba kudu duwe .popoverkelas.

judhul senar | unsur | fungsi ''

Nilai judhul standar yen titleatribut ora ana.

Yen fungsi diwenehi, iku bakal disebut karo thisreferensi disetel kanggo unsur sing popover ditempelake.

pemicu senar 'klik' Carane popover dipicu - klik | nglayang | fokus | manual. Sampeyan bisa ngliwati sawetara pemicu; misahake karo spasi. manualora bisa digabungake karo pemicu liyane.
ngimbangi nomer | senar 0 Offset saka popover relatif kanggo target sawijining. Kanggo informasi luwih lengkap waca docs offset Popper .
fallbackPlacement senar | susunan 'muter' Ngidini kanggo nemtokake posisi sing bakal digunakake Popper nalika mundur. Kanggo informasi luwih lengkap waca docs prilaku Popper
customClass senar | fungsi ''

Tambah kelas menyang popover nalika ditampilake. Elinga yen kelas iki bakal ditambahake saliyane kelas sing ditemtokake ing cithakan. Kanggo nambah sawetara kelas, misahake karo spasi: 'a b'.

Sampeyan uga bisa pass fungsi sing ngirim bali senar siji ngemot jeneng kelas tambahan.

wates senar | unsur 'scrollParent' Wates kendala overflow saka popover. Nampa nilai 'viewport', 'window', 'scrollParent', utawa referensi HTMLElement (JavaScript mung). Kanggo informasi luwih lengkap waca dokumen preventOverflow Popper .
ngresiki boolean bener Aktifake utawa mateni sanitasi. Yen diaktifake 'template', 'content'lan 'title'pilihan bakal diresiki. Deleng bagean sanitizer ing dokumentasi JavaScript kita .
daftar putih obyek Nilai standar Obyek sing ngemot atribut lan tag sing diidini
ngresikiFn null | fungsi null Ing kene sampeyan bisa nyedhiyakake fungsi sanitasi dhewe. Iki bisa migunani yen sampeyan luwih seneng nggunakake perpustakaan khusus kanggo nindakake sanitasi.
popperConfig null | obyek null Kanggo ngganti konfigurasi Popper standar Bootstrap, ndeleng konfigurasi Popper

Atribut data kanggo popovers individu

Pilihan kanggo popovers individu bisa uga ditemtokake liwat nggunakake atribut data, kaya sing diterangake ing ndhuwur.

Metode

Cara lan transisi asinkron

Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .

Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .

$().popover(options)

Inisialisasi popovers kanggo koleksi unsur.

.popover('show')

Nuduhake popover unsur. Bali menyang panelpon sadurunge popover bener-bener ditampilake (yaiku sadurunge shown.bs.popoveracara kasebut kedadeyan). Iki dianggep minangka "manual" pemicu popover. Popovers sing judhul lan isine nol-dawa ora tau ditampilake.

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

.popover('hide')

Ndhelikake popover unsur. Bali menyang panelpon sadurunge popover bener-bener didhelikake (yaiku sadurunge hidden.bs.popoverkedadeyan kasebut). Iki dianggep minangka "manual" pemicu popover.

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

.popover('toggle')

Ngalih popover unsur. Bali menyang panelpon sadurunge popover wis bener ditampilake utawa didhelikake (yaiku sadurunge acara shown.bs.popoverutawa hidden.bs.popoverkedadeyan). Iki dianggep minangka "manual" pemicu popover.

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

.popover('dispose')

Ndhelikake lan ngrusak popover unsur. Popovers sing nggunakake delegasi (sing digawe nggunakake pilihanselector ) ora bisa dirusak individu ing unsur pemicu turunan.

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

.popover('enable')

Menehi popover unsur kemampuan kanggo ditampilake. Popovers diaktifake kanthi gawan.

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

.popover('disable')

Mbusak kemampuan kanggo popover unsur kanggo ditampilake. Popover mung bakal bisa ditampilake yen diaktifake maneh.

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

.popover('toggleEnabled')

Ngalih kemampuan kanggo popover unsur supaya ditampilake utawa didhelikake.

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

.popover('update')

Nganyari posisi popover unsur.

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

Acara

Jinis Acara Katrangan
show.bs.popover Acara iki langsung murub nalika showmetode conto diarani.
ditampilake.bs.popover Acara iki dipecat nalika popover wis katon kanggo pangguna (bakal ngenteni transisi CSS rampung).
hide.bs.popover Acara iki langsung dipecat nalika hidemetode conto wis diarani.
hidden.bs.popover Acara iki dipecat nalika popover wis rampung didhelikake saka pangguna (bakal ngenteni transisi CSS rampung).
inserted.bs.popover Acara iki dipecat sawise show.bs.popoveracara nalika cithakan popover wis ditambahake menyang DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})