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.js
sing ngemot Popper supaya popovers bisa digunakake! - Popovers mbutuhake plugin tooltip minangka ketergantungan.
- Yen sampeyan lagi mbangun JavaScript saka sumber, mbutuhake
util.js
. - Popovers milih kanggo alasan kinerja, dadi sampeyan kudu miwiti dhewe .
- Zero-dawa
title
lancontent
nilai 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
.disabled
utawadisabled
unsur 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-nowrap
ing<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.
prefers-reduced-motion
pitakon 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-toggle
atribut:
$(function () {
$('[data-toggle="popover"]').popover()
})
Conto: Nggunakake container
opsi
Yen sampeyan duwe sawetara gaya ing unsur induk sing ngganggu popover, sampeyan pengin nemtokake adat container
supaya 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 focus
pemicu 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 tabindex
atribut.
<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 disabled
atribut 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-events
unsur 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 hover
minangka pemicu kanggo popovers sampeyan, amarga iki ora bisa dipicu kanggo pangguna keyboard.
Nalika sampeyan bisa nglebokake HTML sing sugih lan terstruktur ing popovers kanthi html
pilihan, 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-describedby
atribut. 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 whiteList
atribut 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=""
.
sanitize
,
sanitizeFn
lan
whiteList
ora 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: |
isi | senar | unsur | fungsi | '' | Nilai isi standar yen Yen fungsi diwenehi, iku bakal disebut karo |
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: |
html | boolean | palsu | Lebokake HTML menyang popover. Yen palsu, text cara 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 fungsi digunakake kanggo nemtokake panggonan seko, diarani simpul DOM popover minangka argumen pisanan lan unsur pemicu DOM node minangka kaloro. Konteks |
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 Popover
Unsur pambungkus paling njaba kudu duwe |
judhul | senar | unsur | fungsi | '' | Nilai judhul standar yen Yen fungsi diwenehi, iku bakal disebut karo |
pemicu | senar | 'klik' | Carane popover dipicu - klik | nglayang | fokus | manual. Sampeyan bisa ngliwati sawetara pemicu; misahake karo spasi. manual ora 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: 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.popover
acara 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.popover
kedadeyan 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.popover
utawa hidden.bs.popover
kedadeyan). 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 show metode 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 hide metode 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.popover acara nalika cithakan popover wis ditambahake menyang DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})