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.
- 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-bs-toggle
atribut:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
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.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Tuladha
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-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. Arah dicerminake nalika nggunakake Bootstrap ing RTL.
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-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-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
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>
, saenipun digawe keyboard-focusable nggunakake tabindex="0"
.
Kanggo pemicu popover sing dipatèni, sampeyan uga luwih seneng data-bs-trigger="hover focus"
supaya popover katon minangka umpan balik visual langsung kanggo pangguna amarga ora ngarep-arep ngeklik unsur sing dipatèni.
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
Sass
Variabel
$popover-font-size: $font-size-sm;
$popover-bg: $white;
$popover-max-width: 276px;
$popover-border-width: $border-width;
$popover-border-color: rgba($black, .2);
$popover-border-radius: $border-radius-lg;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow: $box-shadow;
$popover-header-bg: shade-color($popover-bg, 6%);
$popover-header-color: $headings-color;
$popover-header-padding-y: .5rem;
$popover-header-padding-x: $spacer;
$popover-body-color: $body-color;
$popover-body-padding-y: $spacer;
$popover-body-padding-x: $spacer;
$popover-arrow-width: 1rem;
$popover-arrow-height: .5rem;
$popover-arrow-color: $popover-bg;
$popover-arrow-outer-color: fade-in($popover-border-color, .05);
Panggunaan
Aktifake popovers liwat JavaScript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
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 formulir utawa pranala) ing popover sampeyan (kanthi nambahake unsur kasebut menyang allowList
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-bs-
, kaya ing data-bs-animation=""
. Priksa manawa kanggo ngganti jinis cilik saka jeneng pilihan saka camelCase kanggo kebab-kasus nalika liwat opsi liwat atribut data. Contone, tinimbang nggunakake data-bs-customClass="beautifier"
, gunakake data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, lan
allowList
opsi ora bisa diwenehake nggunakake atribut data.
jeneng | Jinis | Default | Katrangan |
---|---|---|---|
animation |
boolean | true |
Aplikasi transisi fade CSS menyang popover |
container |
senar | unsur | palsu | false |
Nambahake popover menyang unsur tartamtu. Tuladha: |
content |
senar | unsur | fungsi | '' |
Nilai isi standar yen Yen fungsi diwenehi, iku bakal disebut karo |
delay |
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 | false |
Lebokake HTML menyang popover. Yen palsu, innerText properti bakal digunakake kanggo nglebokake isi menyang DOM. Gunakake teks yen sampeyan kuwatir babagan serangan XSS. |
placement |
senar | fungsi | 'right' |
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 |
selector |
senar | palsu | false |
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 . |
template |
senar | '<div class="popover" role="tooltip"><div class="popover-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 |
title |
senar | unsur | fungsi | '' |
Nilai judhul standar yen Yen fungsi diwenehi, iku bakal disebut karo |
trigger |
senar | 'click' |
Carane popover dipicu - klik | nglayang | fokus | manual. Sampeyan bisa ngliwati sawetara pemicu; misahake karo spasi. manual ora bisa digabungake karo pemicu liyane. |
fallbackPlacements |
susunan | ['top', 'right', 'bottom', 'left'] |
Nemtokake placements fallback kanthi menehi dhaptar panggonan ing array (miturut preferensi). Kanggo informasi luwih lengkap waca docs prilaku Popper |
boundary |
senar | unsur | 'clippingParents' |
Wates kendala overflow saka popover (mung ditrapake kanggo modifier preventOverflow Popper). Kanthi gawan, iku 'clippingParents' lan bisa nampa referensi HTMLElement (mung liwat JavaScript). Kanggo informasi luwih lengkap waca docs detectOverflow 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. |
sanitize |
boolean | true |
Aktifake utawa mateni sanitasi. Yen diaktifake 'template' , 'content' lan 'title' pilihan bakal diresiki. Deleng bagean sanitizer ing dokumentasi JavaScript kita . |
allowList |
obyek | Nilai standar | Obyek sing ngemot atribut lan tag sing diidini |
sanitizeFn |
null | fungsi | null |
Ing kene sampeyan bisa nyedhiyakake fungsi sanitasi dhewe. Iki bisa migunani yen sampeyan luwih seneng nggunakake perpustakaan khusus kanggo nindakake sanitasi. |
offset |
susunan | senar | fungsi | [0, 8] |
Offset saka popover relatif kanggo target. Sampeyan bisa ngliwati senar ing atribut data kanthi nilai sing dipisahake koma kaya: Nalika fungsi digunakake kanggo nemtokake offset, diarani obyek sing ngemot panggonan popper, referensi, lan popper rects minangka argumen pisanan. Node DOM unsur pemicu dilewati minangka argumen kapindho. Fungsi kasebut kudu ngasilake array kanthi rong nomer: . Kanggo informasi luwih lengkap waca docs offset Popper . |
popperConfig |
null | obyek | fungsi | null |
Kanggo ngganti konfigurasi Popper standar Bootstrap, ndeleng konfigurasi Popper . Nalika fungsi digunakake kanggo nggawe konfigurasi Popper, diarani karo obyek sing ngemot konfigurasi Popper standar Bootstrap. Iki mbantu sampeyan nggunakake lan nggabungake standar karo konfigurasi sampeyan dhewe. Fungsi kasebut kudu ngasilake obyek konfigurasi kanggo Popper. |
Atribut data kanggo popovers individu
Pilihan kanggo popovers individu bisa uga ditemtokake liwat nggunakake atribut data, kaya sing diterangake ing ndhuwur.
Nggunakake fungsi karopopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
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 .
nuduhake
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.
myPopover.show()
ndhelikake
Ndhelikake popover unsur. Bali menyang panelpon sadurunge popover bener-bener didhelikake (yaiku sadurunge hidden.bs.popover
kedadeyan kasebut). Iki dianggep minangka "manual" pemicu popover.
myPopover.hide()
ngalih
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.
myPopover.toggle()
mbuwang
Ndhelikake lan ngrusak popover unsur (Mbusak data sing disimpen ing unsur DOM). Popovers sing nggunakake delegasi (sing digawe nggunakake pilihanselector
) ora bisa dirusak individu ing unsur pemicu turunan.
myPopover.dispose()
ngaktifake
Menehi popover unsur kemampuan kanggo ditampilake. Popovers diaktifake kanthi gawan.
myPopover.enable()
mateni
Mbusak kemampuan kanggo popover unsur kanggo ditampilake. Popover mung bakal bisa ditampilake yen diaktifake maneh.
myPopover.disable()
toggleAktifake
Ngalih kemampuan kanggo popover unsur supaya ditampilake utawa didhelikake.
myPopover.toggleEnabled()
nganyari
Nganyari posisi popover unsur.
myPopover.update()
getInstance
Cara statis sing ngidini sampeyan entuk conto popover sing ana gandhengane karo unsur DOM
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
Cara statis sing ngidini sampeyan entuk conto popover sing ana gandhengane karo unsur DOM, utawa nggawe sing anyar yen ora diwiwiti.
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Acara
Jenis 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. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})