Popovers a wɔde wɔn ho hyɛ mu

Nsɛm a Wɔaka abom

Nneɛma a ɛsɛ sɛ wuhu bere a wode popover plugin no redi dwuma no:

• Popovers de wɔn ho to nhomakorabea a ɛto so abiɛsa Popper so ma gyinabea. Ɛsɛ sɛ wode popper.min.js ka ho ansa na bootstrap.js, anaasɛ wode biako bootstrap.bundle.min.jsa Popper wom di dwuma.
• Popovers hwehwɛ popover plugin no sɛ ade a ɛde ne ho to so.
• Popovers yɛ opt-in esiane adwumayɛ nti, enti ɛsɛ sɛ w’ankasa wufi ase .
• Zero-tenten titlene contentgyinapɛn ahorow renkyerɛ popover da.
• Kyerɛkyerɛ container: 'body'sɛnea wobɛkwati nkyerɛase ho haw ahorow wɔ afã horow a ɛyɛ den kɛse mu (te sɛ yɛn nsɛm a wɔde hyɛ mu akuw, bɔtn akuw, ne nea ɛkeka ho).
• Popovers a wɔbɛkanyan wɔ nneɛma a ahintaw so no rennyɛ adwuma.
• Ɛsɛ sɛ wɔkanyan popovers ma .disabledanaa disabledelement ahorow wɔ wrapper element bi so.
• Sɛ wɔkanyan no fi nhama a ɛkyekyere nsensanee pii so a, popovers no bɛkɔ mfinimfini wɔ ankora no nyinaa tɛtrɛtɛ ntam. Fa di dwuma .text-nowrapwɔ wo <a>s so na woakwati saa suban yi.
• Ɛsɛ sɛ wɔde popovers sie ansa na wɔayi wɔn nneɛma a ɛne no hyia no afi DOM no mu.
• Popovers betumi akanyan aseda element bi a ɛwɔ sunsuma DOM mu.

Kɔ so kenkan na hwɛ sɛnea popovers de nhwɛso ahorow bi yɛ adwuma.

Nhwɛso ahorow

Ma popovers nyɛ adwuma

Sɛnea yɛaka wɔ atifi hɔ no, ɛsɛ sɛ wohyɛ popovers ase ansa na wɔde adi dwuma. Ɔkwan baako a wobɛfa so ahyɛ popovers nyinaa ase wɔ krataafa bi so ne sɛ wobɛpaw wɔn denam wɔn data-bs-togglesu so, te sɛ saa:

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

Live demo a ɛwɔ hɔ

Yɛde JavaScript a ɛte sɛ atifi hɔ snippet no di dwuma de kyerɛ live popover a edidi so yi ase. Wɔde asɛmti ahorow no si hɔ via data-bs-titlena wɔde nipadua mu nsɛm no si hɔ 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>

Akwankyerɛ anan

Nneɛma anan na ɛwɔ hɔ: soro, nifa, ase, ne benkum. Akwankyerɛ ahorow no yɛ ahwehwɛ bere a wode Bootstrap redi dwuma wɔ RTL mu no. Fa si hɔ data-bs-placementsɛ wobɛsesa akwankyerɛ no.

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

Amaneɛcontainer

Sɛ wowɔ style ahorow bi wɔ ɔwofo element bi so a ɛtwetwe popover bi a, wobɛpɛ sɛ wokyerɛ amanneɛbɔ bi sɛnea containerɛbɛyɛ a popover no HTML bɛda adi wɔ saa element no mu mmom. Eyi abu so wɔ mmuae pon ahorow, nsɛm a wɔde hyɛ mu akuw, ne nea ɛtete saa mu.

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

Tebea foforo a wobɛpɛ sɛ wode amanne a ɛda adi pefee si hɔ containerne popovers a ɛwɔ modal nkɔmmɔbɔ mu , de hwɛ hu sɛ wɔde popover no ankasa abata modal no ho. Eyi ho hia titiriw ma popovers a ɛwɔ nkitahodi nneɛma – modal nkɔmmɔbɔ bɛkyere adwene, enti gye sɛ popover no yɛ abofra ade wɔ modal no mu, wɔn a wɔde di dwuma no rentumi mfa wɔn adwene nsi so anaasɛ wɔmfa saa nkitahodi nneɛma yi nyɛ adwuma.

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

Amanneɛ kwan so popovers

Wubetumi de CSS variables ayɛ sɛnea popovers no te no ho nhyehyɛe . Yɛde custom class bi si hɔ de data-bs-custom-class="custom-popover"to scope yɛn custom appearance na yɛde di dwuma de bu local CSS variables no bi so.

.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 wɔ klik a edi hɔ no so

Fa focustrigger no yi popovers wɔ ɔdefo no klik a edi hɔ a ɛfa element soronko bi ho sen toggle element no so.

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

Nneɛma a wɔadi dɛm

Elements a ɛwɔ disabledattribute no nyɛ nkitahodi, a ɛkyerɛ sɛ wɔn a wɔde di dwuma no ntumi nkɔ so anaasɛ wɔnkyere wɔn mfa nhyɛ popover (anaasɛ adwinnade ho nsɛm). Sɛ́ ano aduru no, wobɛpɛ sɛ wokanyan popover no fi wrapper <div>anaa <span>, a eye sen biara a wɔayɛ no keyboard-focusable denam tabindex="0".

Wɔ popover triggers a wɔadi dɛm ho no, ebia wobɛpɛ nso data-bs-trigger="hover focus"sɛnea ɛbɛyɛ a popover no bɛda adi sɛ nsɛm a wɔde aniwa hu ntɛm ara ma wo dwumadiefoɔ no sɛdeɛ ebia wɔrenhwɛ kwan sɛ wɔbɛkliki element a wɔadi dɛm so.

<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 a ɛwɔ hɔ no

Nneɛma a Ɛsakra

Sɛ́ Bootstrap CSS nsakrae kwan a ɛrekɔ so no fã no, mprempren popovers de mpɔtam hɔ CSS nsakrae ahorow di dwuma wɔ so .popoverma bere ankasa mu nsakrae a ɛkɔ anim. Wɔde Sass so ahyɛ CSS nsakraeɛ no botaeɛ, enti Sass nhyehyɛɛ no ​​da so ara boa, nso.

  --#{$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 nsakrae ahorow

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

Sɛnea wɔde di dwuma

Ma popovers nyɛ adwuma denam JavaScript so:

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

Nneɛma a wubetumi apaw

Sɛnea wobetumi afa data attributes anaa JavaScript so de options no atwam no, wubetumi de option din ahyɛ data-bs-, sɛnea ɛwɔ data-bs-animation="{value}". Hwɛ hu sɛ wobɛsesa case type a ɛwɔ option din no mu afi “ camelCase ” akɔ “ kebab-case ” bere a wode options no nam data attributes so retwam no. Sɛ nhwɛso no, fa di dwuma data-bs-custom-class="beautifier"mmom sen sɛ wode data-bs-customClass="beautifier".

Ɛde besi Bootstrap 5.2.0 no, nneɛma no nyinaa boa nhwehwɛmu a wɔde asie data su data-bs-configa ebetumi de afã nhyehyɛe a ɛnyɛ den ahyɛ mu sɛ JSON ahama. Sɛ element bi wɔ data-bs-config='{"delay":0, "title":123}'ne data-bs-title="456"su ahorow a, botae a etwa to titleno bɛyɛ 456na data su ahorow a ɛtetew mu no bɛbɔ botae ahorow a wɔde ama wɔ data-bs-config. Bio nso, data su ahorow a ɛwɔ hɔ dedaw no tumi de JSON botae ahorow te sɛ data-bs-delay='{"show":0,"hide":150}'.

Dwumadi a wɔde di dwuma nepopperConfig

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

Akwan a wɔfa so yɛ

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

Nsɛm a esisi

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