Popovers

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.

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.

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

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

Nggunakake fungsi karopopperConfig

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

Metode

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

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