Popovers

Apèsi sou lekòl la

Bagay ou dwe konnen lè w ap itilize plugin popover la:

• Popovers konte sou 3yèm pati bibliyotèk Popper pou pwezante. Ou dwe mete popper.min.js anvan bootstrap.js oswa itilize bootstrap.bundle.min.js/ bootstrap.bundle.jski gen Popper pou popovers yo travay!
• Popovers mande pou plugin a tooltip kòm yon depandans.
• Popovers yo patisipe pou rezon pèfòmans, kidonk ou dwe inisyalize yo tèt ou .
• Zewo-longè titleak contentvalè pa janm ap montre yon popover.
• Espesifye container: 'body'pou evite rann pwoblèm nan eleman ki pi konplèks (tankou gwoup opinyon nou yo, gwoup bouton, elatriye).
• Deklanche popovers sou eleman kache pa pral travay.
• Popovers pou .disabledoswa disabledeleman yo dwe deklanche sou yon eleman wrapper.
• Lè yo deklanche soti nan lank ki vlope sou plizyè liy, popovers yo pral santre ant lajè an jeneral lank yo. Sèvi ak .text-nowrapsou ou <a>pou evite konpòtman sa a.
• Popovers yo dwe kache anvan eleman korespondan yo te retire nan DOM la.
• Popovers ka deklanche gras a yon eleman andedan yon DOM lonbraj.

Kontinye lekti pou wè ki jan popovers travay ak kèk egzanp.

Egzanp: Pèmèt popovers toupatou

Youn nan fason yo inisyalize tout popovers sou yon paj ta dwe chwazi yo pa data-bs-toggleatribi yo:

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

Egzanp: Sèvi ak containeropsyon an

Lè ou gen kèk estil sou yon eleman paran ki entèfere ak yon popover, ou pral vle presize yon koutim containerpou HTML popover a parèt nan eleman sa a pito.

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

Egzanp

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

Kat direksyon

Gen kat opsyon ki disponib: anwo, adwat, anba, ak aliye agoch. Enstriksyon yo reflete lè w ap itilize Bootstrap nan 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>

Rejte sou pwochen klike sou

Sèvi ak focusdeklanche a pou ranvwaye popovers sou pwochen klik itilizatè a sou yon eleman diferan pase eleman baskil la.

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

Eleman andikape

Eleman ki gen disabledatribi a pa entèaktif, sa vle di itilizatè yo pa ka hover oswa klike sou yo pou deklanche yon popover (oswa konsèy zouti). Kòm yon solisyon, ou pral vle deklanche popover a soti nan yon anbalaj <div>oswa <span>, depreferans te fè klavye-focusable lè l sèvi avèk tabindex="0".

Pou deklannche popover ki andikape, ou ka prefere tou data-bs-trigger="hover focus"pou popover a parèt kòm fidbak vizyèl imedya pou itilizatè ou yo paske yo pa ka espere klike sou yon eleman ki andikape.

<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

Varyab

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

Itilizasyon

Pèmèt popovers via JavaScript:

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

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-bs-, tankou nan data-bs-animation="". Asire w ke w chanje kalite ka non opsyon an soti nan camelCase a kebab-case lè w ap pase opsyon yo atravè atribi done yo. Pa egzanp, olye pou yo itilize data-bs-customClass="beautifier", sèvi ak data-bs-custom-class="beautifier".

Sèvi ak fonksyon akpopperConfig

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

Metòd

montre

Revele popover yon eleman. Retounen bay moun kap rele a anvan popover a aktyèlman te montre (sa vle di anvan shown.bs.popoverevènman an rive). Sa a konsidere kòm yon "manyèl" deklanche popover la. Popovers ki gen tit ak kontni tou de zewo-longè pa janm parèt.

myPopover.show()

kache

Kache popover yon eleman. Retounen bay moun kap rele a anvan popover a aktyèlman kache (sa vle di anvan hidden.bs.popoverevènman an rive). Sa a konsidere kòm yon "manyèl" deklanche popover la.

myPopover.hide()

baskile

Aktivite popover yon eleman. Retounen bay moun kap rele a anvan popover a aktyèlman te montre oswa kache (sa vle di anvan evènman shown.bs.popoveran hidden.bs.popoverrive). Sa a konsidere kòm yon "manyèl" deklanche popover la.

myPopover.toggle()

jete

Kache epi detwi popover yon eleman (Retire done ki estoke sou eleman DOM). Popovers ki itilize delegasyon (ki kreye lè l sèvi avèk opsyon selectoran ) pa ka detwi endividyèlman sou eleman deklanche desandan yo.

myPopover.dispose()

pèmèt

Bay popover yon eleman kapasite pou yo montre. Popovers yo aktive pa default.

myPopover.enable()

enfim

Retire abilite pou popover yon eleman pou montre. Popover a pral sèlman kapab montre si li re-aktive.

myPopover.disable()

toggleEnabled

Aktivite kapasite pou popover yon eleman yo dwe montre oswa kache.

myPopover.toggleEnabled()

aktyalizasyon

Mete ajou pozisyon popover yon eleman.

myPopover.update()

getInstance

Metòd estatik ki pèmèt ou jwenn egzanp popover ki asosye ak yon eleman DOM

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

getOrCreateInstance

Metòd estatik ki pèmèt ou jwenn egzanp popover ki asosye ak yon eleman DOM, oswa kreye yon nouvo si li pa te inisyalize.

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

Evènman

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