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 de abop pan di 3rd pati laybri Popper fɔ posishun. Yu fɔ inklud popper.min.js bifo bootstrap.js ɔ yuz
bootstrap.bundle.min.js
/bootstrap.bundle.js
we gɛt Popper fɔ mek popovers wok! - Popovers nid di tultip plɔgin as dipɛnsin.
- Popovers na opt-in fɔ pefɔmɛns rizin, so yu fɔ initialize dɛn yusɛf .
- Ziro-lɛngth
title
ɛncontent
valyu 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-nowrap
pan 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.
- Popovers kin trigεr tanks to wan εlimεnt insay wan shado DOM.
prefers-reduced-motion
midia kwɛstyɔn. Si di
ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .
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-bs-toggle
atribyut:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Example: Yuz di container
opshon
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 container
so dat di popover in HTML go apia insay da ɛlimɛnt de insted.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Ɛgzampul
<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>
Fo dairekshɔn dɛn
Fo opshɔn dɛn de: ɔp, rayt, dɔŋ, ɛn lɛft alaynɛd. Dairekshɔn dɛn de mirɔ we yu de yuz Bootstrap na RTL.
<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>
Dismis na di nɛks klik
Yuz di focus
triga 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 tabindex
atribyut bak.
<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'
})
Di ɛlimɛnt dɛn we nɔ ebul fɔ wok
Elemɛnt dɛn wit di disabled
atribyut 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>
, ideally mek keyboard-focusable yuz tabindex="0"
.
Fɔ disabled popover triggers, yu kin lɛk bak data-bs-trigger="hover focus"
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" 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 we bin de
Di tin dɛn we kin chenj
$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);
Aw fɔ yuz am
Enable popovers bay JavaSkript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Mek popovers wok fɔ kibɔd ɛn ɛp tɛknɔlɔji yuza dɛn
Fɔ alaw kibɔd yuza dɛn fɔ aktiv yu popovers, yu fɔ jɔs ad dɛn to HTML ɛlimɛnt dɛn we tradishɔnal kibɔd-fɔkus ɛn intaraktiv (lɛk link ɔ fɔm kɔntrol). Pan ɔl we dɛn kin mek arbitri HTML ɛlimɛnt dɛn (lɛk <span>
s) fɔs bay we dɛn ad di tabindex="0"
atribyut, dis go ad tab stɔp dɛn we kin anɔynt ɛn kɔnfyus pan tin dɛn we nɔ de intaraktiv fɔ di wan dɛn we de yuz di kibɔd, ɛn bɔku pan di ɛtɛknɔlɔji dɛn we de ɛp pipul dɛn naw nɔ de anɔys di tin dɛn we de insay di popover insay dis sityueshɔn . Apat frɔm dat, nɔ jɔs abop pan hover
as di trig fɔ yu popovers, bikɔs dis go mek dɛn nɔ pɔsibul fɔ trig fɔ di wan dɛn we de yuz kibɔd.
Pan ɔl we yu kin put rich, strɔkchɔ HTML insay popovers wit di html
opshɔn, wi rili advays yu fɔ avɔyd fɔ ad bɔku bɔku tin dɛn. Di we aw popover dɛn de wok naw na dat, wans dɛn dɔn sho dɛn, dɛn kɔntinyu fɔ tay to di trig ɛlimɛnt wit di aria-describedby
atribyut. As a rizulyt, di ɔltin fɔ di popover in kɔntinyu go anɔys to ɛp tɛknɔlɔji yuza dɛm as wan lɔng, nɔ-interrupted strim.
Apat frɔm dat, pan ɔl we i pɔsibul fɔ put intaraktiv kɔntrol dɛn bak (lɛk fɔm ɛlimɛnt ɔ link dɛn) na yu popover (bay we yu ad dɛn ɛlimɛnt dɛn ya to di allowList
ɔf atribyut ɛn tag dɛn we dɛn alaw), mɛmba se naw di popover nɔ de manej kibɔd fɔs ɔda. We pɔsin we de yuz kibɔd opin popover, fɔs de kɔntinyu fɔ de pan di trig ɛlimɛnt, ɛn as di popover nɔ kin fala di trig wantɛm wantɛm na di dɔkyumɛnt in strɔkchɔ, no garanti nɔ de fɔ se fɔ go bifo/presTABgo muv wan kibɔd yuza insay di popover sɛf. In shot, jɔs ad intaraktiv kɔntrol to wan popover go mɔs mek dɛn kɔntrol ya nɔ rich/nɔ yuz fɔ di wan dɛn we de yuz kibɔd ɛn di wan dɛn we de yuz ɛp tɛknɔlɔji dɛn, ɔ at di ɔl fɔ mek wan ɔvala fɔs ɔda we nɔ mek lɔjik. Insay dɛn kayn tin ya, tink bɔt fɔ yuz wan modal dayalɔg insted.
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-bs-
, lɛk insay data-bs-animation=""
. Mek shɔ se yu chenj di kes tayp fɔ di opshɔn nem frɔm camelCase to kebab-case we yu de pas di opshɔn dɛn via data atribyut dɛn. Fɔ ɛgzampul, bifo yu yuz data-bs-customClass="beautifier"
, yuz data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, ɛn
allowList
opshɔn dɛn we yu de yuz di data atribyut dɛn.
Nem | Kayn | Balans | Tɔk bɔt |
---|---|---|---|
animation |
boolean we dɛn kɔl | true |
Aplay wan CSS fade transishɔn to di popover |
container |
string fɔ di wan dɛn we de | elemɛnt | lay | false |
Apɛnd di popover to wan patikyula ɛlimɛnt. Fɔ ɛgzampul: |
content |
string fɔ di wan dɛn we de | elemɛnt | wok | '' |
Difɔlt kɔntinyu valyu if If dɛn gi wan fɛnshɔn, dɛn go kɔl am wit in |
delay |
nɔmba | tin | 0 |
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: |
html |
boolean we dɛn kɔl | false |
Put HTML insay di popover. If na lay, innerText dɛn go yuz prɔpati fɔ put kɔntinyu insay di DOM. Yuz tɛks if yu de wɔri bɔt XSS atak dɛn. |
placement |
string fɔ di wan dɛn we de | wok | 'right' |
Aw fɔ posishun di popover - auto | top | dɔŋ ya | lɛft | rayt. 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 |
selector |
string fɔ di wan dɛn we de | lay | false |
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 . |
template |
rop | '<div class="popover" role="tooltip"><div class="popover-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 Di popover's
Di ɔtamost wrap ɛlimɛnt fɔ gɛt di |
title |
string fɔ di wan dɛn we de | elemɛnt | wok | '' |
Difɔlt taytul valyu if If dɛn gi wan fɛnshɔn, dɛn go kɔl am wit in |
trigger |
rop | 'click' |
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. manual nɔ kin ebul fɔ jɔyn wit ɛni ɔda trig. |
fallbackPlacements |
arenjmɛnt fɔ di wan dɛn we de | ['top', 'right', 'bottom', 'left'] |
Difayn fɔlbak plesmɛnt dɛn bay we yu gi wan list fɔ plesmɛnt dɛn na arenjmɛnt (in ɔda we aw dɛn lɛk). Fɔ no mɔ, luk na Popper’s behavior docs |
boundary |
string fɔ di wan dɛn we de | tin | 'clippingParents' |
Ovaflɔ kɔnstrakshɔn bɔda fɔ di popover (i de aplay nɔmɔ to Popper in preventOverflow modifya). Bay difɔlt na 'clippingParents' ɛn kin aksept wan HTMLElement rɛfrɛns (via JavaSkript nɔmɔ). Fɔ no mɔ, luk na Popper’s detectOverflow docs . |
customClass |
string fɔ di wan dɛn we de | wok | '' |
Ad klas dɛn to di popover we dɛn sho am. Notis se dɛn go ad dɛn klas ya apat frɔm ɛni klas we dɛn dɔn sho na di tɛmplat. Fɔ ad bɔku klas dɛn, separet dɛn wit spɛshal say dɛn: Yu kin pas wan fɛnshɔn bak we fɔ ritɔn wan string we gɛt ɔda klas nem dɛn. |
sanitize |
boolean we dɛn kɔl | true |
Enable ɔ disable di sanitayzeshɔn. If activated 'template' , 'content' ɛn 'title' opshɔn dɛn go sanitayz. Si di say we se sanitiza na wi JavaSkript dɔkyumentri . |
allowList |
tin | Difɔlt valyu | Objek we gɛt atribyut ɛn tag dɛn we dɛn alaw |
sanitizeFn |
nul we de na di wɔl | wok | null |
Na ya yu kin saplae yu own sanitize function. Dis kin fayn if yu lɛk fɔ yuz laybri we dɛn dɔn gi yu fɔ du sanitayzeshɔn. |
offset |
arenjmɛnt fɔ | string fɔ di wan dɛn we de | wok | [0, 8] |
Offset of di popover rilitiv to in target. Yu kin pas wan string insay data atribyut dɛn wit kɔma separet valyu dɛn lɛk: We dɛn yuz wan fɛnshɔn fɔ no di ɔfset, dɛn kin kɔl am wit wan ɔbjɛkt we gɛt di pɔpa plesmɛnt, di rɛfrɛns, ɛn di pɔpa rɛkt dɛn as in fɔs argumɛnt. Di trigεrin εlimεnt DOM node de pas as di sɛkɔn argumɛnt. Di fɛnshɔn fɔ ritɔn wan arenjmɛnt wit tu nɔmba dɛn: . Fɔ no mɔ, luk na Popper’s offset docs . |
popperConfig |
nul we de na di wɔl | ɔbjɛkt | wok | null |
Fɔ chenj Bootstrap in difɔlt Popper kɔnfigyushɔn, si Popper in kɔnfigyushɔn . We dɛn yuz wan fɛnshɔn fɔ mek di Popper kɔnfigyushɔn, dɛn kin kɔl am wit wan ɔbjɛkt we gɛt di Bootstrap in difɔlt Popper kɔnfigyushɔn. I de ɛp yu fɔ yuz ɛn jɔyn di difɔlt wit yu yon kɔnfigyushɔn. Di fɛnshɔn fɔ ritɔn wan kɔnfigyushɔn ɔbjɛkt fɔ Popa. |
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.
Yuz funkshɔn witpopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
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 .
sho
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.popover
ivin apin). Dɛn kin tek dis as “manual” we de trig di popover. Popovers we dɛn taytul ɛn kɔntinyu ɔl tu na ziro-lɛngth nɔ de ɛva sho.
myPopover.show()
ayd
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.popover
ivin apin). Dɛn kin tek dis as “manual” we de trig di popover.
myPopover.hide()
fɔ chenj di we aw dɛn de
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.popover
ivin apin). Dɛn kin tek dis as “manual” we de trig di popover.
myPopover.toggle()
fɔ trowe am
Ayd ɛn pwɛl wan ɛlimɛnt in popover (Rimov di data we dɛn dɔn kip na di DOM ɛlimɛnt). Popovers we de yuz delegɛshɔn (we dɛn mek yuz di selector
opshɔn ) nɔ kin ebul fɔ pwɛl wan wan pan disɛndant trig ɛlimɛnt dɛn.
myPopover.dispose()
ɛp
Gi wan element in popover di abiliti fɔ sho. Popovers dɛn dɔn ɛnabul bay difɔlt.
myPopover.enable()
disebul
Rimov di abiliti fɔ wan ɛlim��nt in popover fɔ sho. Di popover go onli ebul fɔ sho if dɛn ri-enable am.
myPopover.disable()
toggleDɛn dɔn ɛnabul am
Toggles di abiliti fɔ wan element in popover fɔ sho ɔ ayd.
myPopover.toggleEnabled()
chenj
Updates di posishun fɔ wan ɛlimɛnt in popover.
myPopover.update()
getInstans fɔ di wan dɛn we de
Statik we de alaw yu fɔ gɛt di popover instans we gɛt fɔ du wit wan DOM ɛlimɛnt
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getƆKriɛtInstans
Statik we de alaw yu fɔ gɛt di popover instans we gɛt fɔ du wit wan DOM ɛlimɛnt, ɔ mek wan nyu wan insay kes we dɛn nɔ bin initialize am
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
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 show instans 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 hide dɛ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.popover ivent we dɛn dɔn ad di popover tɛmplat to di DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})