Luncat ka eusi utama Luncat ka navigasi docs
in English

Popovers

Dokuméntasi sareng conto pikeun nambihan popovers Bootstrap, sapertos anu aya dina ios, kana unsur naon waé dina situs anjeun.

Ihtisar

Hal-hal anu kedah terang nalika nganggo plugin popover:

  • Popovers ngandelkeun perpustakaan pihak ka-3 Popper pikeun posisi. Anjeun kedah ngalebetkeun popper.min.js sateuacan bootstrap.js atanapi nganggo bootstrap.bundle.min.js/ bootstrap.bundle.jsanu ngandung Popper supados popovers tiasa dianggo!
  • Popovers merlukeun plugin tooltip salaku kagumantungan.
  • Popovers milih pikeun alesan kinerja, janten anjeun kedah ngamimitian nyalira .
  • Nol-panjang titlejeung contentnilai moal nembongkeun popover a.
  • Sebutkeun container: 'body'pikeun nyegah masalah rendering dina komponén anu langkung kompleks (sapertos grup input kami, grup tombol, jsb).
  • Triggering popovers on elemen disumputkeun moal jalan.
  • Popovers pikeun .disabledatawa disabledelemen kudu dipicu dina unsur wrapper.
  • Nalika dipicu tina jangkar anu ngabungkus sababaraha garis, popovers bakal dipuseurkeun antara lebar sadayana jangkar. Paké .text-nowrapon <a>s anjeun ulah kabiasaan ieu.
  • Popovers kudu disumputkeun saméméh elemen pakait maranéhanana geus dihapus tina DOM.
  • Popovers tiasa dipicu berkat unsur dina DOM kalangkang.
Sacara standar, komponén ieu nganggo sanitizer eusi anu diwangun, anu ngaleungitkeun unsur HTML anu henteu diidinan sacara eksplisit. Tingali bagian sanitizer dina dokuméntasi JavaScript kami pikeun langkung rinci.
Pangaruh animasi tina komponén ieu gumantung kana prefers-reduced-motionpamundut média. Tempo bagian gerak ngurangan tina dokuméntasi aksés kami .

Tetep maca pikeun ningali kumaha popovers dianggo sareng sababaraha conto.

Conto: Aktipkeun popovers dimana-mana

Salah sahiji cara pikeun ngamimitian sadayana popovers dina halaman nyaéta milih ku data-bs-toggleatributna:

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

Conto: Ngagunakeun containerpilihan

Lamun anjeun boga sababaraha gaya dina unsur indungna nu ngaganggu popover a, anjeun bakal hoyong nangtukeun custom a containerjadi HTML nu popover urang némbongan dina unsur éta gantina.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Contona

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

Opat arah

Opat pilihan sadia: luhur, katuhu, handap, jeung kénca Blok. Arah dicerminkeun nalika nganggo Bootstrap di 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>

Leupaskeun dina klik salajengna

Anggo focuspemicu pikeun ngaleungitkeun popovers dina klik salajengna pangguna tina unsur anu béda ti unsur toggle.

Markup spésifik dipikabutuh pikeun dismiss-on-next-click

Pikeun paripolah cross-browser sareng cross-platform anu leres, anjeun kedah nganggo <a>tag, sanés tag <button>, sareng anjeun ogé kedah ngalebetkeun 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 ditumpurkeun

Unsur-unsur anu gaduh disabledatribut henteu interaktif, hartosna pangguna henteu tiasa hover atanapi ngaklikana pikeun memicu popover (atanapi tooltip). Salaku workaround a, Anjeun bakal hoyong pemicu popover ti wrapper <div>atawa <span>, idéal dijieun keyboard-focusable ngagunakeun tabindex="0".

Pikeun pemicu popover anu ditumpurkeun, anjeun ogé tiasa resep data-bs-trigger="hover focus"supados popover muncul salaku eupan balik visual langsung ka pangguna anjeun sabab henteu nyangka ngaklik unsur anu ditumpurkeun.

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

Pamakéan

Aktipkeun popovers via JavaScript:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Ngadamel popovers dianggo pikeun keyboard sareng pangguna téknologi anu ngabantosan

Pikeun ngidinan pamaké keyboard pikeun ngaktipkeun popovers anjeun, anjeun ngan kudu nambahanana kana elemen HTML nu tradisional keyboard-focusable sarta interaktif (saperti tumbu atawa kontrol formulir). Sanajan elemen HTML sawenang (sapertos <span>s) bisa dijieun focusable ku nambahkeun tabindex="0"atribut, ieu bakal nambahan tab berpotensi bangor tur matak ngabingungkeun eureun dina elemen non-interaktif pikeun pamaké keyboard, sarta paling téknologi mantuan ayeuna teu ngumumkeun eusi popover dina situasi ieu. . Salaku tambahan, ulah ngan ukur ngandelkeun hoversalaku pemicu pikeun popovers anjeun, sabab ieu bakal ngajantenkeun aranjeunna teu mungkin dipicuna pikeun pangguna keyboard.

Sanaos anjeun tiasa nyelapkeun HTML terstruktur anu beunghar dina popovers kalayan htmlpilihan, kami nyarankeun pisan yén anjeun ulah nambihan eusi anu kaleuleuwihan. Cara popovers ayeuna jalan nyaeta, sakali ditampilkeun, eusi maranéhanana dihijikeun ka unsur pemicu jeung aria-describedbyatribut. Hasilna, sakabéh eusi popover bakal diumumkeun ka pamaké téhnologi assistive salaku hiji aliran panjang, uninterrupted.

Salaku tambahan, sanaos kamungkinan ogé kalebet kadali interaktif (sapertos elemen bentuk atanapi tautan) dina popover anjeun (ku nambihan elemen ieu kana allowListatribut sareng tag anu diidinan), perhatikeun yén ayeuna popover henteu ngatur urutan fokus keyboard. Lamun pamaké keyboard muka popover a, fokus tetep dina unsur pemicu, sarta salaku popover biasana teu langsung nuturkeun pemicu dina struktur dokumen urang, euweuh jaminan yén pindah ka hareup / mencét.TABbakal mindahkeun hiji pamaké keyboard kana popover sorangan. Pondokna, ngan saukur nambahkeun kadali interaktif kana popover a kamungkinan nyieun kadali ieu unreachable / teu bisa dipaké pikeun pamaké keyboard jeung pamaké téknologi assistive, atawa sahenteuna nyieun hiji urutan fokus sakabéhna teu logis. Dina kasus ieu, mertimbangkeun ngagunakeun dialog modal gantina.

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-bs-, sapertos dina data-bs-animation="". Pastikeun pikeun ngarobah tipe kasus tina ngaran pilihan tina camelCase ka kebab-kasus nalika ngalirkeun pilihan ngaliwatan atribut data. Contona, tinimbang ngagunakeun data-bs-customClass="beautifier", make data-bs-custom-class="beautifier".

Catet yén pikeun alesan kaamanan sanitize, sanitizeFn, sareng allowListpilihan teu tiasa disayogikeun nganggo atribut data.
Ngaran Tipe Default Katerangan
animation boolean true Larapkeun transisi fade CSS kana popover
container string | unsur | palsu false

Appends popover ka elemen husus. Contona: container: 'body'. Pilihan ieu hususna kapaké sabab ngamungkinkeun anjeun pikeun nempatkeun popover dina aliran dokumen caket unsur pemicu - anu bakal nyegah popover ngambang jauh tina unsur pemicu nalika ngarobih ukuran jandela.

content string | unsur | fungsi ''

Nilai eusi standar upami data-bs-contentatribut teu aya.

Upami fungsina dipasihkeun, éta bakal disebat sareng thisrujukanna disetel ka unsur anu napel popover.

delay angka | objék 0

Reureuh némbongkeun sarta nyumputkeun popover (ms) - teu dilarapkeun ka tipe pemicu manual

Lamun jumlah disadiakeun, reureuh diterapkeun ka duanana nyumputkeun / acara

Struktur objék nyaéta:delay: { "show": 500, "hide": 100 }

html boolean false Selapkeun HTML kana popover nu. Upami palsu, innerTextharta bakal dianggo pikeun nyelapkeun eusi kana DOM. Anggo téks upami anjeun hariwang ngeunaan serangan XSS.
placement string | fungsi 'right'

Kumaha posisi popover - otomatis | luhur | handap | ditinggalkeun | leres.
Nalika autodieusian, éta bakal dinamis reorient popover.

Nalika fungsi dipaké pikeun nangtukeun panempatan, mangka disebut titik popover DOM salaku argumen kahijina sarta triggering unsur titik DOM salaku kadua. Kontéks thisdisetel ka conto popover.

selector string | palsu false Upami pamilih disayogikeun, obyék popover bakal didelegasikeun ka udagan anu ditangtukeun. Dina prakték, ieu dipaké pikeun ngaktipkeun eusi HTML dinamis boga popovers ditambahkeun. Tingali ieu sareng 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>'

Dasar HTML pikeun dianggo nalika nyiptakeun popover.

The popover urang titlebakal nyuntik kana .popover-header.

The popover urang contentbakal nyuntik kana .popover-body.

.popover-arrowbakal janten panah popover.

Unsur wrapper pangluarna kudu boga .popoverkelas.

title string | unsur | fungsi ''

Nilai judul standar upami titleatribut teu aya.

Upami fungsina dipasihkeun, éta bakal disebat sareng thisrujukanna disetel ka unsur anu napel popover.

trigger senar 'click' Kumaha popover dipicu - klik | ngalayang | fokus | manual. Anjeun tiasa ngalangkungan sababaraha pemicu; misahkeun aranjeunna kalayan spasi. manualteu bisa digabungkeun jeung sagala pemicu séjén.
fallbackPlacements susunan ['top', 'right', 'bottom', 'left'] Nangtukeun panempatan fallback ku cara méré daptar panempatan dina susunan (dina urutan preferensi). Kanggo inpo nu leuwih lengkep tingal docs kabiasaan Popper urang
boundary string | unsur 'clippingParents' wates konstrain mudal tina popover (ngan manglaku ka Popper's preventOverflow modifier). Sacara standar éta 'clippingParents'sarta bisa nampa hiji rujukan HTMLElement (via JavaScript wungkul). Kanggo inpo nu leuwih lengkep tingal Popper urang detectOverflow docs .
customClass string | fungsi ''

Tambahkeun kelas kana popover nalika dipintonkeun. Catet yén kelas-kelas ieu bakal ditambah salian ti kelas-kelas anu aya dina citakan. Pikeun nambahkeun sababaraha kelas, misahkeun aranjeunna kalayan spasi: 'class-1 class-2'.

Anjeun oge bisa lulus fungsi nu kudu balik a string tunggal ngandung ngaran kelas tambahan.

sanitize boolean true Aktipkeun atanapi mareuman sanitasi. Upami diaktipkeun 'template', 'content'sareng 'title'pilihan bakal disanitasi. Tingali bagian sanitizer dina dokuméntasi JavaScript kami .
allowList objék Nilai standar Obyék anu ngandung atribut sareng tag anu diidinan
sanitizeFn null | fungsi null Di dieu anjeun tiasa nyayogikeun fungsi sanitasi anjeun nyalira. Ieu tiasa mangpaat upami anjeun resep ngagunakeun perpustakaan khusus pikeun ngalaksanakeun sanitasi.
offset susunan | string | fungsi [0, 8]

Offset tina popover relatif ka target na. Anjeun tiasa ngalangkungan string dina atribut data kalayan nilai anu dipisahkeun koma sapertos:data-bs-offset="10,20"

Nalika hiji fungsi dipaké pikeun nangtukeun offset, mangka disebut kalawan objék ngandung panempatan popper, rujukan, sarta popper rects salaku argumen kahijina. The triggering unsur DOM titik diliwatan salaku argumen kadua. fungsi kudu balik Asép Sunandar Sunarya dua angka :.[skidding, distance]

Kanggo inpo nu leuwih lengkep tingal docs offset Popper urang .

popperConfig null | objék | fungsi null

Pikeun ngarobah konfigurasi Popper standar Bootstrap, tingali konfigurasi Popper .

Nalika hiji fungsi dipaké pikeun nyieun konfigurasi Popper, mangka disebut kalawan obyék nu ngandung konfigurasi Popper standar Bootstrap urang. Éta ngabantosan anjeun nganggo sareng ngahijikeun standar sareng konfigurasi anjeun nyalira. fungsi kudu balik hiji objek konfigurasi pikeun Popper.

Atribut data pikeun popovers individu

Pilihan pikeun popovers individu bisa Alternatipna dieusian ngaliwatan pamakéan atribut data, sakumaha dipedar di luhur.

Ngagunakeun fungsi kalawanpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Métode

Métode Asynchronous sareng transisi

Sadaya metode API henteu sinkron sareng ngamimitian transisi . Aranjeunna balik deui ka panelepon pas transisi dimimitian tapi saméméh éta ends . Sajaba ti éta, panggero métode dina komponén transisi bakal dipaliré .

Tempo dokuméntasi JavaScript kami pikeun inpo nu leuwih lengkep .

nempokeun

Nembongkeun popover unsur. Mulih ka panelepon saméméh popover sabenerna geus ditémbongkeun (ie saméméh shown.bs.popoveracara lumangsung). Ieu dianggap "manual" triggering of popover nu. Popovers anu judulna sareng eusina duanana panjangna nol teu pernah ditampilkeun.

myPopover.show()

nyumput

Nyumputkeun popover unsur. Mulih ka panelepon saméméh popover sabenerna geus disumputkeun (ie saméméh hidden.bs.popoveracara lumangsung). Ieu dianggap "manual" triggering of popover nu.

myPopover.hide()

togél

Toggles popover unsur urang. Mulih ka nu nelepon saméméh popover sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.popoveratawa hidden.bs.popoverkajadian lumangsung). Ieu dianggap "manual" triggering of popover nu.

myPopover.toggle()

miceun

Nyumputkeun sareng ngancurkeun popover unsur (Ngahapus data anu disimpen dina unsur DOM). Popovers nu make delegasi (anu dijieun maké pilihanselector ) teu bisa individual ancur dina elemen pemicu turunan.

myPopover.dispose()

ngaktifkeun

Méré popover hiji unsur kamampuhan pikeun ditingalikeun. Popovers diaktipkeun sacara standar.

myPopover.enable()

mareuman

Ngahapus kamampuan popover unsur pikeun ditingalikeun. Popover ngan bakal tiasa ditingalikeun upami diaktipkeun deui.

myPopover.disable()

toggleDiaktipkeun

Toggles kamampuhan pikeun popover unsur pikeun ditémbongkeun atawa disumputkeun.

myPopover.toggleEnabled()

apdet

Ngamutahirkeun posisi popover unsur.

myPopover.update()

getInstance

Métode statik anu ngamungkinkeun anjeun kéngingkeun conto popover anu aya hubunganana sareng unsur DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Métode statik anu ngamungkinkeun anjeun kéngingkeun conto popover anu aya hubunganana sareng unsur DOM, atanapi ngadamel anu énggal upami éta henteu diinisialisasi.

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Kajadian

Jenis acara Katerangan
show.bs.popover Kajadian ieu langsung hurung nalika showmetode conto disebut.
ditémbongkeun.bs.popover Kajadian ieu dipecat nalika popover parantos katingali ku pangguna (bari ngantosan transisi CSS réngsé).
hide.bs.popover Kajadian ieu langsung dipecat nalika hidemetode conto parantos disebut.
disumputkeun.bs.popover Acara ieu dipecat nalika popover parantos disumputkeun tina pangguna (bari ngantosan transisi CSS réngsé).
diselapkeun.bs.popover Kajadian ieu dipecat sanggeus show.bs.popoverkajadian nalika template popover geus ditambahkeun kana DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})