Popovers

Ihtisar

Hal-hal anu kedah terang nalika nganggo plugin popover:

• Popovers ngandelkeun perpustakaan pihak katilu Popper pikeun positioning. Anjeun kedah ngalebetkeun popper.min.js sateuacan bootstrap.js, atanapi nganggo bootstrap.bundle.min.jsanu ngandung Popper.
• Popovers merlukeun plugin popover 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.

Contona

Aktipkeun popovers

Sakumaha didadarkeun di luhur, Anjeun kudu initialize popovers saméméh maranéhna bisa dipaké. Salah sahiji cara pikeun ngamimitian sadayana popovers dina halaman nyaéta milih aranjeunna dumasar kana data-bs-toggleatributna, sapertos kieu:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Live demo

Kami nganggo JavaScript anu sami sareng snippet di luhur pikeun ngajantenkeun popover langsung di handap ieu. Judul diatur via data-bs-titlejeung eusi awak disetel via data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-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. Arah dicerminkeun nalika nganggo Bootstrap di RTL. Setel data-bs-placementpikeun ngarobah arah.

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

Adatcontainer

Lamun anjeun boga sababaraha gaya dina unsur indungna nu ngaganggu popover a, anjeun bakal hoyong nangtukeun custom a containersangkan HTML nu popover urang némbongan dina unsur éta gantina. Ieu umum dina tabel responsif, grup input, jeung sajabana.

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

Situasi anu sanés dimana anjeun badé nyetél adat anu eksplisit containernyaéta popovers di jero dialog modal , pikeun mastikeun yén popover sorangan ditambah kana modal. Ieu hususna penting pikeun popover nu ngandung elemen interaktif - dialog modal bakal bubu fokus, jadi iwal popover mangrupa unsur anak tina modal, pamaké moal bisa museurkeun atawa ngaktipkeun elemen interaktif ieu.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

popovers custom

Anjeun tiasa nyaluyukeun penampilan popovers nganggo variabel CSS . Urang nyetel kelas custom kalawan data-bs-custom-class="custom-popover"wengkuan penampilan custom urang jeung make eta pikeun override sababaraha variabel CSS lokal.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</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" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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 maké 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>

CSS

Variabel

Salaku bagian tina pendekatan variabel CSS Bootstrap anu ngembang, popovers ayeuna nganggo variabel CSS lokal .popoverpikeun kustomisasi sacara real-time anu ditingkatkeun. Nilai pikeun variabel CSS diatur via Sass, jadi kustomisasi Sass masih dirojong, teuing.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

variabel Sass

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Pamakéan

Aktipkeun popovers via JavaScript:

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

Pilihan

Salaku pilihan bisa diliwatan via atribut data atawa JavaScript, anjeun bisa append hiji ngaran pilihan pikeun data-bs-, sakumaha dina data-bs-animation="{value}". Pastikeun pikeun ngarobah tipe kasus tina ngaran pilihan tina " camelCase " pikeun " kebab-case " nalika ngalirkeun pilihan ngaliwatan atribut data. Contona, make data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".

Salaku Bootstrap 5.2.0, sadaya komponén ngarojong hiji atribut data ditangtayungan eksperimendata-bs-config nu bisa imah konfigurasi komponén basajan salaku string JSON. Lamun hiji unsur boga data-bs-config='{"delay":0, "title":123}'jeung data-bs-title="456"atribut, nilai final titlebakal 456jeung atribut data misah bakal override nilai dibikeun dina data-bs-config. Salaku tambahan, atribut data anu aya tiasa ngeusian nilai JSON sapertos data-bs-delay='{"show":0,"hide":150}'.

Ngagunakeun fungsi kalawanpopperConfig

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

Métode

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Kajadian

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