Popovers

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.

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.

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

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

Ngagunakeun fungsi kalawanpopperConfig

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

Métode

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 henteu diinisialisasi.

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

Kajadian

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})