Popovers

Ringkesan

Sing kudu dingerteni nalika nggunakake plugin popover:

• Popovers gumantung ing perpustakaan pihak katelu Popper kanggo posisi. Sampeyan kudu kalebu popper.min.js sadurunge bootstrap.js, utawa nggunakake salah siji bootstrap.bundle.min.jssing ngemot Popper.
• Popovers mbutuhake plugin popover minangka dependensi.
• 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.

Tansah maca kanggo ndeleng carane popovers bisa digunakake karo sawetara conto.

Tuladha

Aktifake popovers

Kaya kasebut ing ndhuwur, sampeyan kudu miwiti popovers sadurunge bisa digunakake. Salah siji cara kanggo miwiti kabeh popovers ing sawijining kaca yaiku milih kanthi data-bs-toggleatribut, kayata:

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

demo langsung

Kita nggunakake JavaScript sing padha karo cuplikan ing ndhuwur kanggo nggawe popover langsung ing ngisor iki. Judhul disetel liwat data-bs-titlelan isi awak disetel liwat 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>

Papat arah

Ana papat opsi: ndhuwur, tengen, ngisor, lan kiwa. Arah dicerminake nalika nggunakake Bootstrap ing RTL. Setel data-bs-placementkanggo ngganti 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

Yen sampeyan duwe sawetara gaya ing unsur induk sing ngganggu popover, sampeyan pengin nemtokake adat containersupaya HTML popover katon ing unsur kasebut. Iki umum ing tabel responsif, grup input, lan liya-liyane.

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

Kahanan liyane ing ngendi sampeyan pengin nyetel adat eksplisit containeryaiku popovers ing dialog modal , kanggo mesthekake yen popover dhewe ditambahake menyang modal. Iki penting banget kanggo popover sing ngemot unsur interaktif - dialog modal bakal njebak fokus, dadi kajaba popover minangka unsur anak saka modal, pangguna ora bakal bisa fokus utawa ngaktifake unsur interaktif kasebut.

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

Custom popovers

Sampeyan bisa ngatur tampilan popovers nggunakake variabel CSS . Kita nyetel kelas khusus data-bs-custom-class="custom-popover"kanggo nyakup tampilan khusus lan digunakake kanggo ngatasi sawetara 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>

Mbusak ing klik sabanjuré

Gunakake focuspemicu kanggo ngilangi popovers ing klik sabanjuré pangguna saka unsur beda saka 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 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>

CSS

Variabel

Minangka bagéan saka pendekatan variabel CSS Bootstrap sing berkembang, popovers saiki nggunakake variabel CSS lokal .popoverkanggo kustomisasi wektu nyata sing ditingkatake. Nilai kanggo variabel CSS disetel liwat Sass, supaya kustomisasi Sass isih didhukung.

  --#{$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;

Panggunaan

Aktifake popovers liwat JavaScript:

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

Pilihan

Minangka opsi bisa liwati liwat atribut data utawa JavaScript, sampeyan bisa nambah jeneng pilihan kanggo data-bs-, kaya ing data-bs-animation="{value}". Priksa manawa kanggo ngganti jinis kasus jeneng pilihan saka " camelCase " kanggo " kebab-case " nalika ngliwati pilihan liwat atribut data. Contone, nggunakake data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".

Ing Bootstrap 5.2.0, kabeh komponen ndhukung atribut data sing dilindhungi eksperimendata-bs-config sing bisa ngemot konfigurasi komponen sing prasaja minangka string JSON. Nalika unsur duwe data-bs-config='{"delay":0, "title":123}'lan data-bs-title="456"atribut, titlenilai pungkasan bakal 456lan atribut data sing kapisah bakal ngilangi nilai sing diwenehake ing data-bs-config. Kajaba iku, atribut data sing ana bisa ngemot nilai JSON kaya data-bs-delay='{"show":0,"hide":150}'.

Nggunakake fungsi karopopperConfig

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

Metode

// 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'
})

Acara

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