Popovers dɛn

Ɔvaviu fɔ di Baybul

Tin dɛn fɔ no we yu de yuz di popover plɔgin:

• Popovers de abop pan di tɔd pati laybri Popper fɔ pozishɔn. Yu fɔ put popper.min.js bifo bootstrap.js, ɔ yuz wan bootstrap.bundle.min.jswe gɛt Popper.
• Popovers nid di popover plɔgin as dipɛnsin.
• Popovers na opt-in fɔ pefɔmɛns rizin, so yu fɔ initialize dɛn yusɛf .
• Ziro-lɛngth titleɛn contentvalyu dɛn nɔ go ɛva sho wan popover.
• Spɛsify container: 'body'fɔ avɔyd fɔ rɛnd prɔblɛm dɛn na mɔ kɔmpleks kɔmpɔnɛnt dɛn (lɛk wi input grup dɛn, bɔtin grup dɛn, ɛn ɔda wan dɛn).
• Trigεr popovers pan hidden elements nɔ go wok.
• Popovers fɔ .disabledɔ disabledɛlimɛnt dɛn fɔ trig pan wan wrap ɛlimɛnt.
• We dɛn trig am frɔm anka dɛn we de rap akɔdin to bɔku layn dɛn, di popover dɛn go de sɛnt bitwin di ankɔ dɛn ɔl di wit. Yuz .text-nowrappan yu <a>s fɔ avɔyd dis bihayvya.
• Popovers fɔ ayd bifo dɛn dɔn pul dɛn kɔrɛspɔndɛns ɛlimɛnt dɛn na di DOM.
• Popovers kin trigεr tanks to wan εlimεnt insay wan shado DOM.

Kɔntinyu fɔ rid fɔ si aw popovers de wok wit sɔm ɛgzampul dɛn.

Ɛgzampul dɛn

Enable di popovers fɔ di wan dɛn we de wok

As wi bin dɔn tɔk, yu fɔ initialize popovers bifo dɛn kin yuz dɛn. Wan we fɔ initialize ɔl di popovers na wan pej go bi fɔ pik dɛn bay dɛn data-bs-toggleatribyut, lɛk so:

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

Layf dɛmo

Wi de yuz JavaSkript we fiba di snipet we de ɔp fɔ rɛnd di layv popover we de dɔŋ ya. Taytul dɛn de sɛt via data-bs-titleɛn bɔdi kɔntinyu de sɛt 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>

Fo dairekshɔn dɛn

Fo opshɔn dɛn de: ɔp, rayt, dɔŋ, ɛn lɛft. Dairekshɔn dɛn de mirɔ we yu de yuz Bootstrap na RTL. Set data-bs-placementfɔ chenj di dairekshɔn.

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

Wetin kɔmɔncontainer

We yu gɛt sɔm stayl dɛn pan wan mama ɛn papa ɛlimɛnt we de ambɔg wan popover, yu go want fɔ spɛsifa wan kɔstɔm containerso dat di popover in HTML go apia insay da ɛlimɛnt de insted. Dis kin apin na tebul dɛn we de ansa, input grup dɛn, ɛn ɔda tin dɛn lɛk dat.

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

Wan ɔda sityueshɔn usay yu go want fɔ sɛt wan ɛksplisit kɔstɔm containerna popovers insay wan modal dayalɔg , fɔ mek shɔ se di popover sɛf de apɛnd to di modal. Dis impɔtant mɔ fɔ popover dɛn we gɛt intaraktiv ɛlimɛnt dɛn – modal dayalɔg dɛn go trap fɔs, so pas di popover na pikin ɛlimɛnt na di modal, di wan dɛn we de yuz am nɔ go ebul fɔ fos ɔ aktiv dɛn intaraktiv ɛlimɛnt dɛn ya.

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

Kastom popovers dɛn

Yu kin kɔstɔmayz di apinɛns fɔ popover dɛn yuz CSS vɛriɔbul dɛn . Wi sɛt wan kɔstɔm klas wit data-bs-custom-class="custom-popover"fɔ skɔp wi kɔstɔm apinɛns ɛn yuz am fɔ ɔvalayz sɔm pan di lokal CSS vɛriɔbul dɛn.

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

Dismis na di nɛks klik

Yuz di focustriga fɔ dismis popovers pan di yuza in nɛks klik fɔ wan difrɛn ɛlimɛnt pas di tɔgl ɛlimɛnt.

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

Di ɛlimɛnt dɛn we nɔ ebul fɔ wok

Elemɛnt dɛn wit di disabledatribyut nɔ de intaraktiv, we min se yuzman dɛn nɔ kin ebul fɔ hover ɔ klik dɛn fɔ trig wan popover (ɔ tultip). As wokarawnd, yu go want fɔ trig di popover frɔm wan wrap <div>ɔ <span>, ideally mek keyboard-focusable yuz tabindex="0".

Fɔ disabled popover triggers, yu kin lɛk bak data-bs-trigger="hover focus"so dat di popover go apia as kwik vijual fidbak to yu yuza dɛn as dɛn nɔ go ɛkspɛkt fɔ klik pan wan disabled element.

<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 we dɛn kɔl CSS

Di tin dɛn we kin chenj

As pat pan Bootstrap in evolvin CSS vɛriɔbul dɛn aprɔch, popovers naw de yuz lokal CSS vɛriɔbul dɛn on .popoverfɔ ɛnhans rial-taym kɔstɔmayshɔn. Valyu fɔ di CSS vɛriɔbul dɛn de sɛt via Sass, so Sass kɔstɔmayshɔn stil de sɔpɔt, bak.

  --#{$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 di vayriɔbul dɛn

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

Aw fɔ yuz am

Enable popovers bay JavaSkript:

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

Di tin dɛn we yu kin pik fɔ du

As opshɔn dɛn kin pas bay data atribyut ɔ JavaSkript, yu kin ad opshɔn nem to data-bs-, lɛk insay data-bs-animation="{value}". Mek shɔ se yu chenj di kes tayp fɔ di opshɔn nem frɔm “ camelCase ” to “ kebab-case ” we yu de pas di opshɔn dɛn tru data atribyut dɛn. Fɔ ɛgzampul, yuz data-bs-custom-class="beautifier"insted fɔ data-bs-customClass="beautifier".

As fɔ Bootstrap 5.2.0, ɔl di kɔmpɔnɛnt dɛn de sɔpɔt wan ɛkspirimɛnt rizɔv data atribyut data-bs-configwe kin os simpul kɔmpɔnɛnt kɔnfigyushɔn as JSON string. We wan ɛlimɛnt gɛt data-bs-config='{"delay":0, "title":123}'ɛn data-bs-title="456"atribyut, di fayn titlevalyu go bi 456ɛn di sɛpret data atribyut dɛn go ɔvalayz valyu dɛn we dɛn gi pan data-bs-config. Apat frɔm dat, di data atribyut dɛn we de naw ebul fɔ gɛt JSON valyu dɛn lɛk data-bs-delay='{"show":0,"hide":150}'.

Yuz funkshɔn witpopperConfig

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

Di we aw dɛn de du am

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

Di tin dɛn we kin apin

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