Source

Popovers dɛn

Dokumɛnt ɛn ɛgzampul fɔ ad Bootstrap popovers, lɛk di wan dɛn we de na iOS, to ɛni ɛlimɛnt na yu sayt.

Ɔvaviu fɔ di Baybul

Tin dɛn fɔ no we yu de yuz di popover plɔgin:

  • Popovers dipen pan di 3rd pati laybri Popper.js fɔ pozishɔn. Yu fɔ inklud popper.min.js bifo bootstrap.js ɔ yuz bootstrap.bundle.min.js/ bootstrap.bundle.jswe gɛt Popper.js fɔ mek popovers wok!
  • Popovers nid di tultip plɔgin as dipɛnsin.
  • If yu de bil wi JavaSkript frɔm sɔs, i nid fɔutil.js .
  • Popovers na opt-in fɔ pefɔmɛns rizin, so yu fɔ initialize dɛn yusɛf .
  • Ziro-lɛngth titleɛn contentvalyu dɛn nɔ go ɛva sho wan popover.
  • Spɛsify container: 'body'fɔ avɔyd fɔ rɛnd prɔblɛm dɛn na mɔ kɔmpleks kɔmpɔnɛnt dɛn (lɛk wi input grup dɛn, bɔtin grup dɛn, ɛn ɔda wan dɛn).
  • Trigεr popovers pan hidden elements nɔ go wok.
  • Popovers fɔ .disabledɔ disabledɛlimɛnt dɛn fɔ trig pan wan wrap ɛlimɛnt.
  • We dɛn trig am frɔm anka dɛn we de rap akɔdin to bɔku layn dɛn, di popover dɛn go de sɛnt bitwin di ankɔ dɛn ɔl di wit. Yuz .text-nowrappan yu <a>s fɔ avɔyd dis bihayvya.
  • Popovers fɔ ayd bifo dɛn dɔn pul dɛn kɔrɛspɔndɛns ɛlimɛnt dɛn na di DOM.

Kɔntinyu fɔ rid fɔ si aw popovers de wok wit sɔm ɛgzampul dɛn.

Example: Enable popovers evriwia

Wan we fɔ initialize ɔl di popovers na wan pej go bi fɔ pik dɛn bay dɛn data-toggleatribyut:

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

Example: Yuz di containeropshon

We yu gɛt sɔm stayl dɛn pan wan mama ɛn papa ɛlimɛnt we de ambɔg wan popover, yu go want fɔ spɛsifa wan kɔstɔm containerso dat di popover in HTML go apia insay da ɛlimɛnt de insted.

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

Ɛgzampul

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

Fo dairekshɔn dɛn

Fo opshɔn dɛn de: ɔp, rayt, dɔŋ, ɛn lɛft alaynɛd.

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

Dismis na di nɛks klik

Yuz di focustriga fɔ dismis popovers pan di yuza in nɛks klik fɔ wan difrɛn ɛlimɛnt pas di tɔgl ɛlimɛnt.

Speshal mak we nid fɔ dismis-ɔn-nɛks-klik

Fɔ mek yu krɔs-brawza ɛn krɔs-pletfɔm biev fayn, yu fɔ yuz di <a>tɛg, nɔto di <button>tɛg, ɛn yu fɔ put wan tabindexatribyut bak.

Dismissible popover we dɛn kin pul 
<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'
})

Di ɛlimɛnt dɛn we nɔ ebul fɔ wok

Elemɛnt dɛn wit di disabledatribyut nɔ de intaraktiv, we min se yuzman dɛn nɔ kin ebul fɔ hover ɔ klik dɛn fɔ trig wan popover (ɔ tultip). As wokarawnd, yu go want fɔ trig di popover frɔm wan wrap <div>ɔ <span>ɛn ɔvalayz di pointer-eventspan di disabled element.

Fɔ disabled popover triggers, yu kin lɛk bak data-trigger="hover"so dat di popover go apia as kwik vijual fidbak to yu yuza dɛn as dɛn nɔ go ɛkspɛkt fɔ klik pan wan disabled element.

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

Aw fɔ yuz am

Enable popovers bay JavaSkript:

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

Di tin dɛn we yu kin pik fɔ du

Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-, lɛk insay data-animation="".

Nem Kayn Balans Tɔk bɔt
animashɔn fɔ di pikchɔ dɛn boolean we dɛn kɔl tru Aplay wan CSS fade transishɔn to di popover
kɔntena we dɛn kin put insay string fɔ di wan dɛn we de | elemɛnt | lay lay

Apɛnd di popover to wan patikyula ɛlimɛnt. Fɔ ɛgzampul: container: 'body'. Dis opshɔn rili yusful bikɔs i de alaw yu fɔ posishun di popover insay di flɔ na di dɔkyumɛnt nia di trig ɛlimɛnt - we go mek di popover nɔ flot away frɔm di trig ɛlimɛnt we yu de risayz di winda.
satisfay string fɔ di wan dɛn we de | elemɛnt | wok '' .

Difɔlt kɔntinyu valyu if data-contentatribyut nɔ de.

If dɛn gi wan fɛnshɔn, dɛn go kɔl am wit in thisrɛfrɛns sɛt to di ɛlimɛnt we di popover ataya to.
westɛm nɔmba | tin 0. Di wan dɛn we de

Dilay fɔ sho ɛn ayd di popover (ms) - nɔ de aplay to manual trigger type

If dɛn gi wan nɔmba, dɛn kin delay fɔ ɔl tu di ayd/sho

Objekt strɔkchɔ na:delay: { "show": 500, "hide": 100 }
html boolean we dɛn kɔl lay Put HTML insay di popover. If na lay, textdɛn go yuz jQuery in we fɔ put kɔntinyu insay di DOM. Yuz tɛks if yu de wɔri bɔt XSS atak dɛn.
ples fɔ put am string fɔ di wan dɛn we de | wok 'rayt'

Aw fɔ posishun di popover - auto | top | dɔŋ ya | lɛft | rayt.
We autodɛn spɛsifa, i go dinamik rioriɛnt di popover.

We dɛn yuz wan fɛnshɔn fɔ no di plesmɛnt, dɛn kin kɔl am wit di popover DOM node as in fɔs argumɛnt ɛn di trigɛn ɛlimɛnt DOM node as in sɛkɔn. Di thiskɔntɛks de sɛt to di popover instans.
sɛlɛktɔ string fɔ di wan dɛn we de | lay lay If dɛn gi wan sɛlɛktɔ, dɛn go deleget popover ɔbjɛkt dɛn to di target dɛn we dɛn dɔn spɛsifa. Insay prɔsis, dɛn kin yuz dis fɔ mek dinamik HTML kɔntinyu fɔ gɛt popovers we dɛn ad. Si dis ɛn wan ɛgzampul we gɛt bɔku tin dɛn fɔ no bɔt .
tɛmplat fɔ di wan dɛn we de rop '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML fɔ yuz we yu de mek di popover.

Di popover's titlego injekt insay di .popover-header.

Di popover's contentgo injekt insay di .popover-body.

.arrowgo bi di popover in aro.

Di ɔtamost wrap ɛlimɛnt fɔ gɛt di .popoverklas.
taytul string fɔ di wan dɛn we de | elemɛnt | wok '' .

Difɔlt taytul valyu if titleatribyut nɔ de.

If dɛn gi wan fɛnshɔn, dɛn go kɔl am wit in thisrɛfrɛns sɛt to di ɛlimɛnt we di popover ataya to.
stat rop 'klik'. Aw popover de trig - klik | hover fɔ di wan dɛn we de wok | fɔs fɔs | buk. Yu kin pas bɔku trig dɛn; separet dɛn wit wan ples. manualnɔ kin ebul fɔ jɔyn wit ɛni ɔda trig.
ɔfset nɔmba | rop 0. Di wan dɛn we de Offset of di popover rilitiv to in target. Fɔ no mɔ, luk na Popper.js in ɔfset dɔkyumɛnt dɛn .
fallbackPlesmɛnt fɔ put string fɔ di wan dɛn we de | arenjmɛnt fɔ di wan dɛn we de 'tɔn oba' Alaw fɔ spɛsifa us pozishɔn Popa go yuz pan fɔl bak. Fɔ no mɔ, luk na Popper.js in bihayvya dɔkyumɛnt dɛn
bɔda string fɔ di wan dɛn we de | tin 'skrolParent'. Ovaflɔ kɔnstrakshɔn bɔda fɔ di popover. Aksept di valyu dɛn fɔ 'viewport', 'window', 'scrollParent', ɔ wan HTMLElement rɛfrɛns (JavaSkript nɔmɔ). Fɔ no mɔ, luk na Popper.js in preventOverflow docs .

Data atribyut fɔ wan wan popover dɛn

Opshɔn fɔ wan wan popover dɛn kin ɔda we fɔ spɛsifa tru di yus fɔ data atribyut dɛn, as dɛn ɛksplen am ɔp.

Di we aw dɛn de du am

Asynchronous mεtכd dεm εn transishכn dεm

Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .

Si wi JavaSkript dɔkyumentri fɔ no mɔ.

$().popover(options)

Initializes popovers fɔ wan ɛlimɛnt kɔllɛkshɔn.

.popover('show')

Rivɛl wan ɛlimɛnt in popover. Ritɔn to di pɔsin we kɔl bifo di popover dɔn rili sho (dat na bifo di shown.bs.popoverivin apin). Dɛn kin tek dis as “manual” we de trig di popover. Popovers we dɛn ɔl tu taytul ɛn kɔntinyu na zero-lɛngth nɔ de ɛva sho.

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

.popover('hide')

Ayd wan ɛlimɛnt in popover. Ritɔn to di pɔsin we kɔl bifo di popover dɔn rili ayd (dat na bifo di hidden.bs.popoverivin apin). Dɛn kin tek dis as “manual” we de trig di popover.

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

.popover('toggle')

Toggles wan element in popover. Ritɔn to di pɔsin we kɔl bifo di popover dɔn rili sho ɔ ayd (dat na bifo di shown.bs.popoverɔ hidden.bs.popoverivin apin). Dɛn kin tek dis as “manual” we de trig di popover.

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

.popover('dispose')

Ayd ɛn pwɛl wan ɛlimɛnt in popover. Popovers we de yuz delegɛshɔn (we dɛn mek yuz di selectoropshɔn ) nɔ kin ebul fɔ pwɛl wan wan pan disɛndant trig ɛlimɛnt dɛn.

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

.popover('enable')

Gi wan element in popover di abiliti fɔ sho. Popovers dɛn dɔn ɛnabul bay difɔlt.

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

.popover('disable')

Rimov di abiliti fɔ wan ɛlimɛnt in popover fɔ sho. Di popover go onli ebul fɔ sho if dɛn ri-enable am.

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

.popover('toggleEnabled')

Toggles di abiliti fɔ wan element in popover fɔ sho ɔ ayd.

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

.popover('update')

Updates di posishun fɔ wan ɛlimɛnt in popover.

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

Di tin dɛn we kin apin

Di kayn tin we apin Tɔk bɔt
sho.bs.popover fɔ di wan dɛn we de Dis ivent de faya wantɛm wantɛm we dɛn kɔl di showinstans mɛtɔd.
sho.bs.popova Dis ivent de faya we di popover dɔn mek visible to di yuza (go wet fɔ CSS transishɔn fɔ dɔn).
ayd.bs.popover fɔ di wan dɛn we de Dis ivent de faya wantɛm wantɛm we hidedɛn dɔn kɔl di instans mɛtɔd.
ayd.bs.powa we de Dis ivent de faya we di popover dɔn dɔn fɔ ayd frɔm di yuza (go wet fɔ CSS transishɔn dɛn fɔ dɔn).
insay.bs.poova Dis ivent de faya afta di show.bs.popoverivent we dɛn dɔn ad di popover tɛmplat to di DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})