Popovers

Nkatsakanyo

Swilo leswi u faneleke u swi tiva loko u tirhisa plugin ya popover:

• Popovers yi titshege hi layiburari ya munhu wa vunharhu Popper eka xiyimo. U fanele ku katsa popper.min.js emahlweni ka bootstrap.js, kutani u tirhisa bootstrap.bundle.min.jsleyi nga na Popper.
• Popovers yi lava popover plugin tanihi ku titshega.
• Ti-popovers i ti-opt-in hikwalaho ka swivangelo swa matirhelo, hikwalaho u fanele u ti sungula hi wexe .
• Zero-length titlena contentvalues ​​a swi nge pfuki swi kombisi popover.
• Boxa container: 'body'ku papalata swiphiqo swa ku hundzuluxela eka swiphemu leswi rharhanganeke swinene (ku fana na mintlawa ya hina ya ku nghenisa, mintlawa ya swikomba-nkarhi, na swin’wana).
• Ku hlohlotela ti-popovers eka swiaki leswi fihliweke a swi nge tirhi.
• Popovers for .disabledkumbe disabledti elements tifanele ku pfuriwa eka element ya wrapper.
• Loko yi hlohleteriwa kusuka eka ti anchors leti phutselaka eka milayeni yotala, ti popovers titava tiri exikarhi exikarhi ka ku anama hinkwako ka ti anchors. Tirhisa .text-nowrapeka s ya wena <a>ku papalata mahanyelo lawa.
• Ti popovers tifanele ku fihliwa loko ti elements ta tona leti fambelanaka tinga se susiwa eka DOM.
• Popovers yinga pfuriwa hiku khensa element endzeni ka shadow DOM.

Tshama u ri karhi u hlaya ku vona ndlela leyi ti- popover ti tirhaka ha yona hi swikombiso swin’wana.

Swikombiso

Endla leswaku ti-popovers ti tirha

Tani hilaha swinga boxiwaka hakona laha henhla, ufanele kusungula ti popovers loko tinga se tirhisiwa. Ndlela yin’wana yo sungula ti-popover hinkwato eka tluka ku nga va ku ti hlawula hi data-bs-togglexihlawulekisi xa tona, ku fana na sweswo:

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

Demo leyi hanyaka

Hi tirhisa JavaScript leyi fanaka na xiphemu lexi nga laha henhla ku hundzuluxela popover leyi landzelaka leyi hanyaka. Swihloko swi vekiwa hi ku tirhisa data-bs-titlenaswona nhundzu ya miri yi vekiwa hi ku tirhisa 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>

Tindlela ta mune

Ku ni swilo swa mune leswi u nga swi hlawulaka: ehenhla, exineneni, ehansi ni le ximatsi. Swiletelo swi kombisiwa hi xivoni loko u tirhisa Bootstrap eka RTL. Seta data-bs-placementku cinca ndlela.

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

Ntolovelocontainer

Loko u ri na switayele swin’wana eka elemente ya mutswari leswi kavanyetaka popover, u ta lava ku boxa ntolovelo containerleswaku HTML ya popover yi humelela endzeni ka elemente yoleyo ematshan’wini ya sweswo. Leswi swi tolovelekile eka matafula lama hlamulaka, mintlawa ya swingheniso ni swin’wana swo fana na swona.

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

Xiyimo xin’wana laha u nga ta lava ku veka mukhuva lowu nga erivaleni containeri ti-popovers endzeni ka mbulavurisano wa modal , ku tiyisisa leswaku popover hi yoxe yi engeteriwe eka modal. Leswi i swa nkoka swinene eka ti-popover leti nga na swiaki swo tirhisana – mimbulavurisano ya modal yi ta khoma ku kongomisa, kutani handle ka loko popover yi ri xiphemu xa n’wana xa modal, vatirhisi a va nge swi koti ku kongomisa kumbe ku tirhisa swiaki leswi swa vuhlanganisi.

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

Ti-popovers ta ntolovelo

U nga ha cinca ku languteka ka ti-popover hi ku tirhisa swilo leswi cinca-cincaka swa CSS . Hi veka tlilasi ya ntolovelo na data-bs-custom-class="custom-popover"ku scope xivumbeko xa hina xa ntolovelo ivi hi yi tirhisa ku tlula swin’wana swa swilo leswi cinca-cincaka swa CSS swa laha kaya.

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

Dismiss eka ku click loku landzelaka

Tirhisa focusxihlohloteri ku hlongola ti-popover eka ku tsindziyela loku landzelaka ka mutirhisi ka elemente yo hambana ku tlula elemente yo cinca-cinca.

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

Swiaki leswi lamaleke

Swiaki leswi nga na disabledxihlawulekisi a swi tirhisani, leswi vulaka leswaku vatirhisi a va nge swi koti ku hover kumbe ku swi tsindziyela ku pfuxa popover (kumbe tooltip). Tanihi ndlela yo tshungula, u ta lava ku pfuxa popover ku suka eka xifunengeto <div>kumbe <span>, hi ndlela leyinene yi endliwe leswaku yi kongomisiwa eka khibhodi hi ku tirhisa tabindex="0".

Eka swihlohloteri swa popover leswi lamaleke, u nga ha tlhela u tsakela data-bs-trigger="hover focus"leswaku popover yi humelela tanihi vuyelo bya xihatla bya xivono eka vatirhisi va wena tanihileswi va nga ha langutelaka ku tikhoma eka elemente leyi lamaleke.

<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

Swilo leswi cinca-cincaka

Tanihi xiphemu xa ndlela ya Bootstrap leyi cinca-cincaka ya swilo leswi cinca-cincaka swa CSS, ti-popover sweswi ti tirhisa swilo leswi cinca-cincaka swa CSS swa laha kaya on .popoverfor enhanced real-time customization. Mimpimo ya swilo leswi cinca-cincaka swa CSS yi vekiwile hi ku tirhisa Sass, kutani ku cinca ka Sass ka ha seketeriwa, na kona.

  --#{$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 swilo leswi cinca-cincaka

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

Matirhiselo

Endla leswaku ti-popovers ti tirha hi ku tirhisa JavaScript:

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

Swihlawulekisi

Tanihi leswi swihlawulekisi swi nga hundziseriwaka hi ku tirhisa swihlawulekisi swa data kumbe JavaScript, u ​​nga engetela vito ra xihlawulekisi eka data-bs-, tanihi le ka data-bs-animation="{value}". Tiyisisa leswaku u cinca muxaka wa xiyimo xa vito ra xihlawulekisi ku suka eka “ camelCase ” ku ya eka “ kebab-case ” loko u hundzisa swihlawulekisi hi ku tirhisa swihlawulekisi swa data. Hi xikombiso, tirhisa data-bs-custom-class="beautifier"ematshan’weni ya data-bs-customClass="beautifier".

Ku sukela eka Bootstrap 5.2.0, swiphemu hinkwaswo swi seketela xihlawulekisi xa datha leyi hlayisiweke ya xikambelodata-bs-config lexi nga vekaka vukorhokeri byo olova bya xiphemu tanihi ntambhu ya JSON. Loko elemente yi ri data-bs-config='{"delay":0, "title":123}'na na data-bs-title="456"swihlawulekisi, titlentikelo wo hetelela wu ta va 456naswona swihlawulekisi swa datha leswi hambaneke swi ta tlula mimpimo leyi nyikiweke eka data-bs-config. Ku engetela kwalaho, swihlawulekisi swa datha leswi nga kona swi kota ku veka mimpimo ya JSON ku fana na data-bs-delay='{"show":0,"hide":150}'.

Ku tirhisa ntirho napopperConfig

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

Maendlelo

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

Swiendlakalo

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