Lumpat menyang isi utama Lumpat menyang pandhu arah docs
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.
  • 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-bs-toggleatribut:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

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.

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 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-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 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>, 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 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 formulir utawa pranala) ing popover sampeyan (kanthi nambahake unsur kasebut menyang allowListatribut 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".

Elinga yen kanggo alasan keamanan sanitize, sanitizeFn, lan allowListopsi 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: 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.

content senar | unsur | fungsi ''

Nilai isi standar yen data-bs-contentatribut ora ana.

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

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:delay: { "show": 500, "hide": 100 }

html boolean false Lebokake HTML menyang popover. Yen palsu, innerTextproperti 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 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.

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 titlebakal disuntikake menyang .popover-header.

Popover contentbakal disuntikake menyang .popover-body.

.popover-arrowbakal dadi panah popover.

Unsur pambungkus paling njaba kudu duwe .popoverkelas.

title senar | unsur | fungsi ''

Nilai judhul standar yen titleatribut ora ana.

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

trigger senar 'click' Carane popover dipicu - klik | nglayang | fokus | manual. Sampeyan bisa ngliwati sawetara pemicu; misahake karo spasi. manualora 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: 'class-1 class-2'.

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:data-bs-offset="10,20"

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: .[skidding, distance]

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.popoveracara 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.popoverkedadeyan 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.popoverutawa hidden.bs.popoverkedadeyan). 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 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.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})