Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
in English

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.
  • 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.
Sɛnea wɔahyɛ no, saa ade yi de content sanitizer a wɔasisi no di dwuma, a ɛyi HTML nneɛma biara a wɔmma ho kwan pefee no fi hɔ. Hwɛ sanitizer ɔfã a ɛwɔ yɛn JavaScript nkrataa mu no ma nsɛm pii.
Animation nkɛntɛnso a ɛwɔ saa ade yi mu no gyina prefers-reduced-motionmedia asɛmmisa no so. Hwɛ yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .

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.

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.

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

Popovers a wɔbɛma ayɛ adwuma ama keyboard ne mfiridwuma a ɛboa wɔn a wɔde di dwuma no

Sɛ wobɛma keyboard dwumadiefoɔ atumi ayɛ wo popovers no adwuma a, ɛsɛ sɛ wode ka HTML elements a ɛyɛ atetesɛm no keyboard-focusable ne nkitahodiɛ (te sɛ links anaa form controls) nko ara. Ɛwom sɛ wobetumi ama HTML nneɛma a wɔpɛ (te sɛ <span>s) ayɛ nea wɔde wɔn adwene si so denam tabindex="0"su no a wɔde bɛka ho so de, nanso eyi bɛma tab gyinabea ahorow a ebetumi ayɛ abufuw na ɛyɛ basaa bɛka nneɛma a ɛnyɛ nkitahodi ho ama keyboard dwumadiefoɔ, na mfiridwuma a ɛboa dodoɔ no ara mprempren mmɔ popover no mu nsɛm ho amanneɛ wɔ saa tebea yi mu . Bio nso, mfa wo ho nto so nkutoo hoversɛ nea ɛkanyan wo popovers no, efisɛ eyi bɛma ayɛ den sɛ ɛbɛkanyan wɔn a wɔde keyboard di dwuma no.

Bere a wubetumi de HTML a ɛyɛ fɛ, a wɔahyehyɛ no ahyɛ popovers mu a htmlwobɛpaw no, yɛhyɛ nyansa denneennen sɛ kwati sɛ wode nsɛm a ɛboro so bɛka ho. Ɔkwan a popovers fa so yɛ adwuma mprempren ne sɛ, sɛ wɔda no adi wie a, wɔde wɔn nsɛm no kyekyere trigger element a ɛwɔ aria-describedbyattribute no ho. Ne saa nti, wɔde popover no mu nsɛm nyinaa bɛto gua akyerɛ wɔn a wɔde mfiridwuma ho nimdeɛ a ɛboa di dwuma no sɛ nsu tenten biako a wontwa mu.

Bio nso, bere a ɛyɛ yiye sɛ wode nkitahodi controls (te sɛ form elements anaa links) nso bɛka wo popover no ho (denam saa elements yi a wode bɛka allowListof allowed attributes and tags ho) no, hu sɛ mprempren popover no nhwɛ keyboard focus nhyehyɛe so. Sɛ keyboard dwumadie bi bue popover a, adwene kɔ so tra triggering element no so, na sɛdeɛ popover no taa nni trigger no akyi ntɛm ara wɔ document no nhyehyɛɛ mu no, biribiara nni hɔ a ɛkyerɛ sɛ wobɛkɔ anim/abɛmiaTABbɛma obi a ɔde keyboard di dwuma akɔ popover no ankasa mu. Ne tiawa mu no, sɛ wode nkitahodi nhyehyɛe ahorow bɛka popover ho kɛkɛ a, ɛda adi sɛ ɛbɛma saa nhyehyɛe ahorow yi ayɛ nea wontumi nkɔ/wɔrentumi mfa nni dwuma mma wɔn a wɔde keyboard di dwuma ne wɔn a wɔde mfiridwuma a ɛboa di dwuma, anaasɛ anyɛ yiye koraa no, ɛbɛma wɔanya nhyehyɛe a wɔde wɔn adwene si so nyinaa a ntease nnim. Wɔ saa nsɛm yi mu no, susuw ho sɛ wode modal nkɔmmɔbɔ bedi dwuma mmom.

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

Hyɛ no nsow sɛ esiane ahobammɔ nti wontumi mfa data su ahorow mfa sanitize, sanitizeFn, ne options no mma.allowList
Din Korɔ Mfiaseɛ Nkyerɛmu
animation boolean ho asɛm true Fa CSS fade nsakrae bi di dwuma wɔ popover no so
container ahama | element | ɛnyɛ ampa false

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

content ahama | element | dwumadie ''

Default content value sɛ data-bs-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.

delay nɔma | adeɛ 0

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 boolean ho asɛm false Fa HTML hyɛ popover no mu. Sɛ ɛyɛ atoro a, innerTextwɔde agyapadeɛ bedi dwuma de ahyɛ nsɛm a ɛwɔ DOM no mu. Fa text di dwuma sɛ XSS ntua ho asɛm haw wo a.
placement ahama | dwumadie 'right'

Sɛnea wɔde popover no si hɔ - auto | soro | ase hɔ | benkum so | nifa.
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.

selector ahama | ɛnyɛ ampa false 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 .
template ahoma '<div class="popover" role="tooltip"><div class="popover-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.

.popover-arrowbɛyɛ popover no agyan.

Ɛsɛ sɛ wrapper element a ɛwɔ akyi paa no nya .popoveradesuakuw no.

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

trigger ahoma 'click' 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.
fallbackPlacements array a ɛwɔ hɔ ['top', 'right', 'bottom', 'left'] Kyerɛkyerɛ fallback placements mu denam placements list a wode bɛma wɔ array mu (sɛnea wopɛ nnidiso nnidiso). Sɛ wopɛ nsɛm pii a hwɛ Popper's behavior docs
boundary ahama | adeɛ 'clippingParents' Overflow anohyeto hye a ɛwɔ popover no mu (ɛfa Popper preventOverflow modifier no nkutoo ho). Sɛnea wɔahyɛ no ɛyɛ 'clippingParents'na ebetumi agye HTMLElement nkyerɛkyerɛmu (ɛnam JavaScript nkutoo so). Sɛ wopɛ nsɛm pii a hwɛ Popper detectOverflow docs .
customClass ahama | dwumadie ''

Fa adesua ahorow ka popover no ho bere a wɔakyerɛ no. Hyɛ no nsow sɛ wɔde saa adesua ahorow yi bɛka adesua ahorow biara a wɔakyerɛ wɔ nsusuwso no mu no ho. Sɛ wode adesua ahorow pii bɛka ho a, fa ahunmu tetew mu: 'class-1 class-2'.

Wubetumi nso de dwumadie bi a ɛsɛ sɛ ɛsan de ahama baako a adesua din foforɔ wom ba no atwam.

sanitize boolean ho asɛm true Ma sanitization no nyɛ adwuma anaasɛ ɛnnyɛ adwuma. If activated 'template', 'content'na 'title'options no bɛyɛ sanitized. Hwɛ sanitizer ɔfã no wɔ yɛn JavaScript nkrataa no mu .
allowList adeɛ Default bo a ɛsom Adeɛ a ɛwɔ su ne tags a wɔama ho kwan
sanitizeFn null | dwumadie null Ɛha na wubetumi de w’ankasa sanitize adwuma ama. Eyi betumi ayɛ nea mfaso wɔ so sɛ wopɛ sɛ wode nhomakorabea a wɔatu ho ama di dwuma de yɛ ahotew a.
offset nhyehyeɛ | ahama | dwumadie [0, 8]

Offset a popover no toto ne botae no ho. Wubetumi de ahama bi akɔ data su ahorow mu a ɛwɔ botae ahorow a wɔatew mu wɔ koma mu te sɛ:data-bs-offset="10,20"

Sɛ wɔde dwumadie bi di dwuma de kyerɛ offset no a, wɔde adeɛ bi a ɛwɔ popper placement, reference, ne popper rects sɛ ne argument a ɛdi kan no frɛ no. Wɔde triggering element DOM node no twam sɛ akyinnyegye a ɛto so abien. Ɛsɛ sɛ dwumadie no san de array a ɛwɔ nɔma mmienu ba: .[skidding, distance]

Sɛ wopɛ nsɛm pii a hwɛ Popper's offset docs .

popperConfig null | ade | dwumadie null

Sɛ wopɛ sɛ wosakra Bootstrap no Popper nhyehyɛe a ɛwɔ hɔ dedaw no a, hwɛ Popper nhyehyɛe .

Sɛ wɔde dwumadie bi di dwuma de yɛ Popper nhyehyeɛ no a, wɔde adeɛ bi a ɛwɔ Bootstrap no Popper nhyehyeɛ a ɛwɔ hɔ dedaw no frɛ no. Ɛboa wo ma wode default no di dwuma na wode bom ne w’ankasa nhyehyɛe. Ɛsɛ sɛ dwumadie no san de nhyehyɛɛ adeɛ bi ba ma Popper.

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.

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ɛ

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 .

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

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 wonya popover nhwɛso a ɛbata DOM element bi ho, anaasɛ wobɔ foforo 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

Adeyɛ 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.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})