Source

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

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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  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.

Markup pɔtee a ɛho hia ma dismiss-on-next-click

Sɛ wopɛ sɛ wobɔ cross-browser ne cross-platform suban yiye a, ɛsɛ sɛ wode <a>tag no di dwuma, ɛnyɛ tag no <button>, na ɛsɛ sɛ wode tabindexattribute nso ka ho.

Popover a wɔpow no 
<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)

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

Din Korɔ Mfiaseɛ Nkyerɛmu
animation a wɔde yɛ nneɛma boolean ho asɛm nokorɛ Fa CSS fade nsakrae bi di dwuma wɔ popover no so
ade a wɔde gu mu ahama | element | ɛnyɛ ampa ɛnyɛ ampa

Ɛde popover no ka element pɔtee bi ho. Nhwɛso: container: 'body'. Saa nhyehyeɛ yi ho wɔ mfasoɔ titire wɔ sɛdeɛ ɛma wo kwan ma wode popover no si nwoma no nsuo mu wɔ baabi a ɛbɛn triggering element no - a ɛbɛsi popover no kwan sɛ ɛbɛsen akɔ akyirikyiri afiri triggering element no ho bere a woresakra mfɛnsere no kɛseɛ.
emu nsɛm ahama | element | dwumadie '' .

Default content value sɛ data-contentattribute no nni hɔ a.

Sɛ wɔde dwumadie bi ma a, wɔbɛfrɛ no a ne thisnkyerɛkyerɛmu no ahyɛ element a popover no abata ho no ho.
ka akyi nɔma | adeɛ 0 na ɛwɔ hɔ

Delay kyerɛ na wɔde sie popover (ms) - no mfa manual trigger type ho

Sɛ wɔde nɔma bi ma a, wɔde delay di dwuma wɔ hide/show abien no nyinaa mu

Adeɛ nhyehyɛɛ ne:delay: { "show": 500, "hide": 100 }
html na ɛwɔ hɔ boolean ho asɛm ɛnyɛ ampa Fa HTML hyɛ popover no mu. Sɛ ɛyɛ atoro a, wɔde jQuery textkwan no bedi dwuma de ahyɛ nsɛm a ɛwɔ DOM no mu. Fa text di dwuma sɛ XSS ntua ho asɛm haw wo a.
a wɔde bɛto hɔ ahama | dwumadie 'nifa'

Sɛnea wɔde popover no si hɔ - auto | soro | ase hɔ | benkum so | nifa.
Sɛ autowɔkyerɛ a, ɛbɛsan akyerɛ popover no kwan wɔ ɔkwan a ɛyɛ nnam so.

Sɛ wɔde dwumadie bi di dwuma de kyerɛ beaeɛ a wɔde bɛto a, wɔfrɛ no a popover DOM node no yɛ ne akasakasa a ɛdi kan ne triggering element DOM node sɛ ne deɛ ɛtɔ so mmienu. Wɔde thisnsɛm a ɛfa ho no asi popover nhwɛso no so.
nea ɔpaw ade ahama | ɛnyɛ ampa ɛnyɛ ampa Sɛ wɔde selector bi ma a, wɔde popover nneɛma bɛhyɛ botae ahorow a wɔakyerɛ no nsa. Wɔ nneyɛe mu no, wɔde eyi di dwuma de ma HTML nsɛm a ɛyɛ nnam no tumi nya popovers a wɔde aka ho. Hwɛ eyi ne nhwɛso a ɛma nsɛm pii .
nsusuwso ahoma '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML a wode bedi dwuma bere a woreyɛ popover no.

Wɔde popover no titlebɛhyɛ .popover-header.

Wɔde popover no contentbɛhyɛ .popover-body.

.arrowbɛyɛ popover no agyan.

Ɛsɛ sɛ wrapper element a ɛwɔ akyi paa no nya .popoveradesuakuw no.
atiti asɛm ahama | element | dwumadie '' .

Default title value sɛ titleattribute no nni hɔ a.

Sɛ wɔde dwumadie bi ma a, wɔbɛfrɛ no a ne thisnkyerɛkyerɛmu no ahyɛ element a popover no abata ho no ho.
nkanyan ahoma 'kliki'. Sɛnea popover no fi ase - klik | hover | adwene a wɔde si biribi so | akwankyerɛ. Wubetumi atwam wɔ nneɛma pii a ɛkanyan adwene mu; fa ahunmu tetew wɔn mu. manualwontumi mfa nkata ade foforo biara a ɛkanyan no ho.
offset a wɔde hyɛ mu nɔma | ahoma 0 na ɛwɔ hɔ Offset of the popover sɛ wɔde toto ne botae ho a. Sɛ wopɛ nsɛm pii a hwɛ Popper.js offset docs .
fallbackNsɛm a wɔde si hɔ ahama | array a ɛwɔ hɔ 'dane' Ma kwan ma wɔnkyerɛ gyinabea a Popper de bedi dwuma wɔ fallback so. Sɛ wopɛ nsɛm pii a hwɛ Popper.js suban docs
ɔhye so ahama | adeɛ 'scrollƆwofo'. Overflow constraint hye a ɛwɔ popover no mu. Gye 'viewport', 'window', 'scrollParent', anaa HTMLElement nkyerɛkyerɛmu bi (JavaScript nkutoo) botae ahorow tom. Sɛ wopɛ nsɛm pii a hwɛ Popper.js preventOverflow docs .

Data su ahorow a ɛfa ankorankoro popovers ho

Wobetumi akyerɛ akwan foforo a wɔbɛfa so akyerɛ ankorankoro popovers denam data su ahorow a wɔde bedi dwuma so, sɛnea wɔakyerɛkyerɛ mu wɔ atifi hɔ no.

Akwan a wɔfa so yɛ

Asynchronous akwan ne nsakrae ahorow

API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛɛ no ​​no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Bio nso, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛresakra so no so .

Hwɛ yɛn JavaScript nkrataa no na woanya nsɛm pii.

$().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

Nsɛm a Ɛsisii no Su Nkyerɛmu
kyerɛ.bs.popover Saa adeyɛ yi tow ntɛm ara bere a showwɔfrɛ instance kwan no.
wɔakyerɛ.bs.popover Wɔtow saa adeyɛ yi bere a wɔayɛ popover no ahu nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow no awie).
hide.bs.popover a ɛwɔ hɔ no Wɔtow saa adeyɛ yi ntɛm ara bere a hidewɔafrɛ instance kwan no.
ahintaw.bs.ohia Wɔtow saa adeyɛ yi bere a popover no awie a wɔde asie ama ɔdefo no (bɛtwɛn ma CSS nsakrae ahorow no awie).
wɔde ahyɛ mu.bs.popover Wɔtow saa adeyɛ yi wɔ adeyɛ no akyi show.bs.popoverbere a wɔde popover template no aka DOM no ho. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})