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

Nwoma ne nhwɛsoɔ a wode bɛka Bootstrap popovers, te sɛ deɛ wɔhunu wɔ iOS mu, wɔ element biara a ɛwɔ wo site no so.

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.
• Sɛ worekyekye yɛn JavaScript no afi fibea a, ɛhwehwɛ sɛutil.js .
• 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 trɛw 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-togglesu so:

$(function () {
  $('[data-toggle="popover"]').popover()
})

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.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Nhwɛsoɔ

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-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ɛ.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</button>

Dismiss wɔ klik a edi hɔ no so

Fa focustrigger no di dwuma fa 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-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  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ɛ́ adwuma no, wobɛpɛ sɛ wokanyan popover no fi wrapper bi mu <div>anaasɛ <span>na wubu so pointer-eventswɔ element a wɔadi dɛm no so.

Wɔ popover triggers a wɔadi dɛm ho no, ebia wobɛpɛ nso data-trigger="hover"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" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Sɛnea wɔde di dwuma

Ma popovers nyɛ adwuma denam JavaScript so:

$('#example').popover(options)

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

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-, sɛnea ɛwɔ data-animation="".

Akwan a wɔfa so yɛ

$().popover(options)

Fi ase popovers ma element ahorow a wɔaboaboa ano.

.popover('show')

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

$('#element').popover('show')

.popover('hide')

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.

$('#element').popover('hide')

.popover('toggle')

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.

$('#element').popover('toggle')

.popover('dispose')

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

$('#element').popover('dispose')

.popover('enable')

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

$('#element').popover('enable')

.popover('disable')

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.

$('#element').popover('disable')

.popover('toggleEnabled')

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

$('#element').popover('toggleEnabled')

.popover('update')

Updates gyinabea a element bi popover wɔ.

$('#element').popover('update')

Nsɛm a esisi

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})