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 3rd party nhomakorabea Popper so ma gyinabea. Ɛsɛ sɛ wode popper.min.js ka ho ansa na bootstrap.js anaa wode bootstrap.bundle.min.js/ bootstrap.bundle.jsa Popper wom di dwuma na ama popovers ayɛ adwuma!
• Popovers hwehwɛ tooltip 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: Ma popovers nyɛ adwuma wɔ baabiara

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

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

Nhwɛso: Sɛ wode containeroption no bedi dwuma

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.

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

Nhwɛsoɔ

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

Akwankyerɛ anan

Nneɛma anan wɔ hɔ a wubetumi apaw: atifi, nifa, ase, ne benkum a wɔahyehyɛ no pɛpɛɛpɛ. Akwankyerɛ ahorow no yɛ ahwehwɛ bere a wode Bootstrap redi dwuma wɔ RTL mu 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>

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

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>

Sass

Nneɛma a Ɛsakra

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

Sɛnea wɔde di dwuma

Ma popovers nyɛ adwuma denam JavaScript so:

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-bs-, sɛnea ɛwɔ data-bs-animation="". Hwɛ 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, sɛ́ anka wode bedi dwuma data-bs-customClass="beautifier"no, fa data-bs-custom-class="beautifier".

Dwumadi a wɔde di dwuma nepopperConfig

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

Akwan a wɔfa so yɛ

da no adi

Ɛda element bi popover adi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔada popover no adi ankasa (kyerɛ sɛ ansa na shown.bs.popoverasɛm no asi). Wobu eyi sɛ “nsaano” a wɔde kanyan popover no. Popovers a wɔn asɛmti ne emu nsɛm nyinaa yɛ zero-length no, wɔmfa nkyerɛ da.

myPopover.show()

tɛ

Fa element bi popover no sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde popover no asie ankasa (kyerɛ sɛ ansa na hidden.bs.popoverasɛm no asi). Wobu eyi sɛ “nsaano” a wɔde kanyan popover no.

myPopover.hide()

toggle no

Toggles element bi popover. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ popover no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.popoveranaa hidden.bs.popoveradeyɛ no aba). Wobu eyi sɛ “nsaano” a wɔde kanyan popover no.

myPopover.toggle()

tow gu

Hides na ɛsɛe element bi popover (Eyi data a wɔde asie wɔ DOM element no so). Popovers a ɛde delegation di dwuma (a wɔbɔ denam option noselector so ) no ntumi nsɛe no ankorankoro wɔ descendant trigger elements so.

myPopover.dispose()

ma kwan

Ɛma element bi popover tumi a wɔde bɛkyerɛ. Popovers no yɛ adwuma default so.

myPopover.enable()

sɛe

Yi tumi a ɛwɔ hɔ ma element bi popover a wɔbɛda no adi no fi hɔ. Sɛ wɔsan de yɛ adwuma nkutoo a, wobetumi akyerɛ popover no.

myPopover.disable()

toggleWɔama ayɛ adwuma

Toggles tumi a ɛma element bi popover bɛkyerɛ anaa wɔde asie.

myPopover.toggleEnabled()

sakra mu

Updates gyinabea a element bi popover wɔ.

myPopover.update()

nyaNhwɛsode

Static kwan a ɛma wo kwan ma wo nya popover nhwɛso a ɛbata DOM element bi ho

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

nyaAnaasɛKyɛNhwɛso

Static kwan a ɛma wo kwan ma wo nya popover nhwɛsoɔ a ɛbata DOM element bi ho, anaasɛ wobɔ foforɔ sɛ ɛba sɛ wɔanhyɛ aseɛ a

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

Nsɛm a esisi

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