Popovers

Apèsi sou lekòl la

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

• Popovers konte sou twazyèm pati bibliyotèk Popper pou pwezante. Ou dwe mete popper.min.js anvan bootstrap.js, oswa itilize youn bootstrap.bundle.min.jski gen Popper.
• Popovers mande pou plugin popover a 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 yo

Pèmèt popovers

Kòm mansyone pi wo a, ou dwe inisyalize popovers anvan yo ka itilize yo. Youn nan fason yo inisyalize tout popovers sou yon paj ta dwe chwazi yo pa data-bs-toggleatribi yo, tankou sa a:

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

Live Demo

Nou itilize JavaScript menm jan ak snippet ki anwo a pou rann popover ap viv sa a. Tit yo mete atravè data-bs-titleepi kontni kò yo mete atravè 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>

Kat direksyon

Gen kat opsyon ki disponib: anwo, adwat, anba, ak agoch. Enstriksyon yo reflete lè w ap itilize Bootstrap nan RTL. Mete data-bs-placementpou chanje direksyon an.

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

Customcontainer

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. Sa a se komen nan tab reponn, gwoup opinyon, ak renmen an.

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

Yon lòt sitiyasyon kote ou pral vle mete yon koutim eksplisit containeryo se popovers andedan yon dyalòg modal , pou asire w ke popover nan tèt li mete nan modal la. Sa a se patikilyèman enpòtan pou popovers ki genyen eleman entèaktif - dyalòg modal pral pyèj konsantre, kidonk sof si popover a se yon eleman timoun nan modal la, itilizatè yo pa pral kapab konsantre oswa aktive eleman entèaktif sa yo.

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

Popovers personnalisé

Ou ka personnaliser aparans popovers lè l sèvi avèk varyab CSS . Nou mete yon klas koutim ak data-bs-custom-class="custom-popover"dimansyon aparans koutim nou an epi sèvi ak li pou pase sou plas kèk nan varyab CSS lokal yo.

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

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

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>

CSS

Varyab

Kòm yon pati nan apwòch Bootstrap a evolye varyab CSS, popovers kounye a itilize varyab CSS lokal yo .popoverpou amelyore personnalisation an tan reyèl. Valè pou varyab CSS yo mete atravè Sass, kidonk personnalisation Sass toujou sipòte tou.

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

Sass varyab

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

Itilizasyon

Pèmèt popovers via JavaScript:

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

Opsyon

Kòm opsyon yo ka pase atravè atribi done oswa JavaScript, ou ka ajoute yon non opsyon nan data-bs-, tankou nan data-bs-animation="{value}". 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, sèvi ak data-bs-custom-class="beautifier"olye de data-bs-customClass="beautifier".

Apati Bootstrap 5.2.0, tout konpozan sipòte yon eksperimantal atribi done rezève data-bs-configki ka loje konfigirasyon eleman senp kòm yon kòd JSON. Lè yon eleman gen data-bs-config='{"delay":0, "title":123}'ak data-bs-title="456"atribi, titlevalè final la pral 456ak atribi done separe yo pral pase sou valè yo bay sou data-bs-config. Anplis de sa, atribi done ki egziste deja yo kapab loje valè JSON tankou data-bs-delay='{"show":0,"hide":150}'.

Sèvi ak fonksyon akpopperConfig

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

Metòd

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

Evènman

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