Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
in English

Dagiti Popovers

Dokumentasion ken dagiti pagarigan para iti pananginayon kadagiti Bootstrap popovers, kas kadagidiay masarakan iti iOS, iti ania man nga elemento iti site-mo.

Panangkita iti pakabuklan

Dagiti banag nga ammuen no agusar ti popover plugin:

  • Agpannuray dagiti Popovers iti 3rd party library Popper para iti panagposision. Masapul nga iramanmo ti popper.min.js sakbay ti bootstrap.js wenno usarem ti bootstrap.bundle.min.js/ bootstrap.bundle.jsa naglaon iti Popper tapno agtrabaho dagiti popovers!
  • Dagiti Popovers ket agkasapulan ti tooltip plugin a kas maysa a panagpanpanunot.
  • Dagiti popovers ket opt-in para kadagiti rason ti panagaramid, isu a masapul nga irugim a mismo dagitoy .
  • Zero-length titleken contentvalues ​​ket pulos a di mangipakita iti popover.
  • Ibaga container: 'body'tapno maliklikan dagiti parikut ti panagiparang kadagiti ad-adu a komplikado a paset (kas dagiti grupo ti panagserrektayo, dagiti grupo ti buton, kdpy).
  • Saan nga agtrabaho ti panangtignay kadagiti popover kadagiti nailemmeng nga elemento.
  • Dagiti popovers para .disabledwenno disableddagiti elemento ket masapul a mai-trigger iti maysa nga elemento ti balkot.
  • No mai-trigger manipud kadagiti angkla a mangbalkot iti adu a linia, dagiti popover ket maisentro iti nagbaetan ti pakabuklan a kalawa dagiti angkla. Usaren .text-nowrapti <a>s-mo tapno maliklikan daytoy a kababalin.
  • Masapul a mailemmeng dagiti popovers sakbay a maikkat dagiti katupagda nga elemento manipud iti DOM.
  • Mabalin a mai-trigger dagiti popovers gapu iti elemento iti uneg ti shadow DOM.
Babaen ti kasisigud, daytoy a paset ket agus-usar ti naibangon a sanitizer ti linaon, a mangikkat kadagiti ania man nga elemento ti HTML a saan a nalawag a maipalubos. Kitaen ti benneg ti sanitizer iti dokumentasionmi iti JavaScript para iti ad-adu pay a detalye.
Ti epekto ti animasion daytoy a paset ket agpannuray iti prefers-reduced-motionpanagsaludsod ti media. Kitaen ti benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .

Itultuloymo ti agbasa tapno makitam no kasano nga agtrabaho dagiti popover babaen ti sumagmamano a pagarigan.

Pagarigan: Pagbalinen dagiti popovers iti sadinoman

Ti maysa a wagas a mangirugi kadagiti amin a popover iti maysa a panid ket isu koma ti panangpili kadagitoy babaen ti data-bs-toggleattributeda:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Pagarigan: Panangusar iti containerpagpilian

No addaanka kadagiti sumagmamano nga estilo iti nagannak nga elemento a mangsinga iti popover, kayatmo nga ikeddeng ti maysa a kostumbre containertapno ti HTML ti popover ket agparang ketdi iti uneg dayta nga elemento.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Pagwadan

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

Uppat a direksion

Uppat a pagpilian ti magun-odan: ngato, kannawan, baba, ken kannigid a naitunos. Dagiti direksion ket maisarming no agus-usar ti Bootstrap iti 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>

Dismiss iti sumaruno nga i-click

Usaren ti focusgatilio tapno mailaksid dagiti popover iti sumaganad a panagpidut ti agar-aramat iti sabali nga elemento ngem ti elemento ti panagbalbaliw.

Espesipiko a panagmarka ti kasapulan para iti dismiss-on-next-click

Para iti umno a kababalin ti krus-browser ken krus-plataporma, masapul nga usarem ti <a>etiketa, saan a ti <button>etiketa, ken masapul met nga iramanmo ti maysa a tabindexkababalin.

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

Dagiti baldado nga elemento

Dagiti elemento nga addaan iti disabledattribute ket saan nga interaktibo, kayatna a sawen a dagiti agar-aramat ket dida mabalin ti ag-hover wenno ag-klik kadagitoy tapno mangtignay ti popover (wenno tooltip). Kas maysa a panagliklik, kayatmo a mangtignay ti popover manipud iti maysa a wrapper <div>wenno <span>, nasayaat a naaramid a teklado-a-maipamaysa babaen ti panagusar ti tabindex="0".

Para kadagiti baldado a popover a mangtignay, mabalinmo pay a kaykayat data-bs-trigger="hover focus"tapno ti popover ket agparang a kas ti dagus a biswal a sungbat kadagiti agar-aramatmo a kas mabalin a dida namnamaen a mangi -klik iti maysa a baldado nga elemento.

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

Dagiti Variable

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

Panagusar

Pagbalinen dagiti popover babaen ti JavaScript:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Ti panangaramid kadagiti popover nga agtrabaho para kadagiti agus-usar iti keyboard ken assistive technology

Tapno mapalubosan dagiti agar-aramat ti teklado a mangpaaktibo kadagiti popover-mo, rumbeng laeng nga inayonmo dagitoy kadagiti elemento ti HTML a tradisional a maipamaysa iti teklado ken interaktibo (kas dagiti silpo wenno dagiti kontrol ti porma). Urayno dagiti arbitrario nga elemento ti HTML (kas ti <span>s) ket mabalin a maaramid a maipamaysa babaen ti pananginayon ti tabindex="0"attribute, daytoy ket manginayon kadagiti mabalin a makarimon ken makariro a panagsardeng ti tab kadagiti saan nga interaktibo nga elemento para kadagiti agar-aramat ti teklado, ken kaaduan kadagiti makatulong a teknolohia ket agdama a dida ipakaammo ti linaon ti popover iti daytoy a kasasaad . Mainayon pay, dika agpannuray laeng a hoverkas ti mangtignay kadagiti popover-mo, ta daytoy ket mangaramidto kadakuada nga imposible a mangtignay para kadagiti agar-aramat ti teklado.

Bayat a mabalinmo nga ikabil ti nabaknang, naistruktura nga HTML kadagiti popover nga addaan iti htmlpagpilian, irekomendarmi unay a liklikam ti pananginayon iti nalabes a kaadu ti linaon. Ti wagas ti agdama nga agtrabaho dagiti popover ket, apaman a maiparang, ti linaonda ket naisilpo iti elemento ti mangtignay nga addaan ti aria-describedbyattribute. Kas resultana, maipakaammo ti intero a linaon ti popover kadagiti agus-usar iti makatulong a teknolohia kas maysa nga atiddog, di nasinga nga ayus.

Iti pay maipatinayon, bayat a mabalin pay nga iraman dagiti interaktibo a kontrol (kas dagiti elemento ti porma wenno dagiti silpo) iti popover-mo (babaen ti pananginayon kadagitoy nga elemento iti allowListdagiti maipalubos a kababalin ken dagiti etiketa), ammom nga iti agdama ti popover ket saan a mangiturturay ti urnos ti pokus ti teklado. No ti maysa nga agar-aramat ti teklado ket manglukat ti popover, ti pokus ket agtalinaed iti mangtignay nga elemento, ken kas ti popover ket kadawyan a saan a dagus a sumurot ti mangtignay iti estruktura ti dokumento, awan ti garantia nga umabante/panagprentaTABiyakarna ti maysa nga agus-usar iti teklado iti popover a mismo. Iti ababa a pannao, ti laeng pananginayon kadagiti interaktibo a kontrol iti maysa a popover ket mabalin a mangaramid kadagitoy a kontrol a saan a madanon/saan a mausar para kadagiti agar-aramat ti teklado ken dagiti agar-aramat kadagiti makatulong a teknolohia, wenno iti kabassitan ket mangaramid para iti saan a lohikal a sapasap a panagurnos ti pokus. Kadagitoy a kaso, ibilang ti panagusar ti modal a dialogo imbes a.

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-bs-, a kas iti data-bs-animation="". Siguraduen a baliwan ti kita ti kaso ti nagan ti pagpilian manipud iti camelCase iti kebab-case no ipasa dagiti pagpilian babaen dagiti attribute ti datos. Kas pagarigan, imbes nga usarem ti data-bs-customClass="beautifier", usarem ti data-bs-custom-class="beautifier".

Imutektekanyo a gapu kadagiti rason ti seguridad ti sanitize, sanitizeFn, ken allowListdagiti pagpilian ket saan a maited babaen ti panagusar kadagiti kababalin ti datos.
Nagan Tipo Default Panangiladawan
animation boolean nga true Iyaplikar ti CSS fade transition iti popover
container kuerdas nga | elemento nga | saan nga agpayso false

Inayon ti popover iti espesipiko nga elemento. Kas pagarigan: container: 'body'. Daytoy a pagpilian ket nangruna a makatulong gapu ta daytoy ket mangipalubos kenka a mangiposision ti popover iti panagayus ti dokumento iti asideg ti mangtignay nga elemento - a manglapped ti popover manipud iti panagtaytayab nga adayo manipud iti mangtignay nga elemento bayat ti panagbalbaliw ti kadakkel ti tawa.

content kuerdas nga | elemento nga | amad ''

Default a pateg ti linaon no data-bs-contentawan ti attribute.

No ti maysa a panagandar ket naited, daytoy ket maawaganto nga addaan ti thisreperensiana a naikabil iti elemento a nakaikapet ti popover.

delay numero | banag 0

Ti panangitantan ti panangipakita ken panangilemmeng ti popover (ms) - saan nga agaplikar iti manual a kita ti trigger

No naited ti numero, maipakat ti delay agpadpada iti hide/show

Ti estruktura ti banag ket:delay: { "show": 500, "hide": 100 }

html boolean nga false Ikabil ti HTML iti popover. No palso, innerTextti sanikua ket mausarto a mangikabil ti linaon iti DOM. Usaren ti teksto no madanaganka kadagiti panangraut ti XSS.
placement kuerdas nga | amad 'right'

Kasano nga iposision ti popover - auto | ngato | baba | kanigid | kusto.
No autonaikeddeng, dinamiko nga orientasionna manen ti popover.

No ti maysa a panagandar ket maus-usar a mangikeddeng ti pannakaikabil, daytoy ket maawagan nga addaan ti popover DOM a nodo a kas ti umuna nga argumentona ken ti mangtignay nga elemento a DOM a nodo a kas ti maikadua. Ti thiskonteksto ket naikeddeng iti popover instance.

selector kuerdas nga | saan nga agpayso false No ti maysa a mangpili ket naited, dagiti banag ti popover ket maitedto kadagiti naikeddeng a puntiria. Iti praktis, daytoy ket maus-usar tapno mapalubosan ti dinamiko a linaon ti HTML nga addaan kadagiti popover a nainayon. Kitaen daytoy ken ti makaisuro a pagarigan .
template kuerdas '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base ti HTML nga usaren no mangpartuat ti popover.

Ti popover's titleket mai-inject iti .popover-header.

Ti popover's contentket mai-inject iti .popover-body.

.popover-arrowagbalinto a pana ti popover.

Ti makinruar unay nga elemento ti balkot ket rumbeng nga addaan iti .popoverklase.

title kuerdas nga | elemento nga | amad ''

Default a pateg ti paulo no titleawan ti attribute.

No ti maysa a panagandar ket naited, daytoy ket maawaganto nga addaan ti thisreperensiana a naikabil iti elemento a nakaikapet ti popover.

trigger kuerdas 'click' Kasano a mai-trigger ti popover - i-click ti | ag-hover nga | pokus | giya. Mabalin a lumasatka iti adu a trigger; pagsinaen ida babaen ti maysa nga espasio. manualsaan a mabalin a maitipon iti aniaman a sabali a trigger.
fallbackPlacements array nga ['top', 'right', 'bottom', 'left'] Depinaren dagiti fallback a pannakaikabil babaen ti panangipaay ti listaan ​​dagiti pannakaikabil iti array (iti panagsasaruno ti kaykayat). Para iti ad-adu pay nga impormasion kitaen dagiti dok ti kababalin ni Popper
boundary kuerdas nga | elemento 'clippingParents' Beddeng ti limitasion ti panaglablabes ti popover (agaplikar laeng iti preventOverflow a mangbalbaliw ti Popper). Babaen ti kasisigud daytoy 'clippingParents'ket mabalin nga umawat ti reperensia ti HTMLElement (babaen laeng ti JavaScript). Para iti ad-adu pay nga impormasion kitaen dagiti dokumento ti detectOverflow ni Popper .
customClass kuerdas nga | amad ''

Inayon dagiti klase iti popover no maipakita dayta. Imutektekanyo a dagitoy a klase ket mainayonto a mainayon kadagiti ania man a klase a naikeddeng iti plantilia. Tapno mainayon ti adu a klase, pagsinaen dagitoy babaen kadagiti espasyo: 'class-1 class-2'.

Mabalinmo pay nga ipasa ti maysa a panagandar a rumbeng nga agsubli ti maymaysa a kuerdas a naglaon kadagiti kanayonan a nagan ti klase.

sanitize boolean nga true Pagbalinen wenno balbaliwan ti sanitization. No activated 'template', 'content'ken 'title'dagiti pagpilian ket ma-sanitize. Kitaen ti benneg ti sanitizer iti dokumentasionmi iti JavaScript .
allowList banag Default nga pateg Bagay a naglaon kadagiti maipalubos nga attribute ken tag
sanitizeFn null nga | amad null Ditoy a mabalinmo nga i-supply ti bukodmo a sanitize function. Mabalin a makatulong daytoy no kaykayatmo ti agusar iti naisangsangayan a libraria tapno maaramid ti sanitization.
offset array nga | kuerdas nga | amad [0, 8]

Offset ti popover relatibo iti puntiriana. Mabalinmo nga ipasa ti maysa a kuerdas kadagiti kababalin ti datos nga addaan kadagiti pateg a naisina babaen ti koma a kas ti:data-bs-offset="10,20"

No ti maysa a panagandar ket maus-usar a mangikeddeng ti offset, daytoy ket maawagan babaen ti maysa a banag a naglaon ti pannakaikabil ti popper, ti reperensia, ken dagiti popper rects a kas ti umuna nga argumentona. Ti mangtignay nga elemento a DOM a nodo ket maipasa a kas ti maikadua nga argumento. Ti function ket masapul nga agsubli ti maysa nga array nga addaan iti dua a numero: .[skidding, distance]

Para iti ad-adu pay nga impormasion kitaen dagiti offset docs ni Popper .

popperConfig null nga | banag | amad null

Tapno baliwan ti default a Popper a konfigurasion ti Bootstrap, kitaen ti panagisaad ti Popper .

No ti maysa a panagandar ket maus-usar a mangpartuat ti panagisaad ti Popper, daytoy ket maawagan babaen ti maysa a banag a naglaon ti kasisigud a panagisaad ti Popper ti Bootstrap. Tulongannaka nga agusar ken mangitipon ti default iti bukodmo a panagisaad. Ti panagandar ket masapul nga isublina ti maysa a banag ti panagisaad para iti Popper.

Dagiti attribute ti datos para kadagiti indibidual a popovers

Dagiti pagpilian para kadagiti indibidual a popover ket mabalin nga alternatibo a maikeddeng babaen ti panagusar kadagiti kababalin ti datos, a kas naipalawag iti ngato.

Usar ti function nga addaanpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Dagiti Pamay-an

Dagiti asynchronous a pamay-an ken panagbalbaliw

Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .

Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion .

ipakita

Ipalgakna ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita ti popover (kayatna a sawen sakbay a shown.bs.popovermapasamak ti pasamak). Maibilang daytoy a “manual” a panangtignay iti popover. Dagiti popover a ti paulo ken linaonda ket agpada a zero-length ket saan a pulos a maiparang.

myPopover.show()

aglemmeng

Ilemmengna ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti popover (kayatna a sawen sakbay a hidden.bs.popovermapasamak ti pasamak). Maibilang daytoy a “manual” a panangtignay iti popover.

myPopover.hide()

ag-toggle nga

I-toggles ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita wenno nailemmeng ti popover (kayatna a sawen sakbay a mapasamak ti shown.bs.popoverwenno hidden.bs.popoverpasamak). Maibilang daytoy a “manual” a panangtignay iti popover.

myPopover.toggle()

ibelleng

Ilemmeng ken dadaelen ti popover ti maysa nga elemento (Ikkaten ti naidulin a datos iti elemento ti DOM). Dagiti popover nga agus-usar ti delegasion (a naparsua babaen ti panagusar ti selectorpagpilian ) ket saan a mabalin a saggaysa a madadael kadagiti kaputotan a mangtignay nga elemento.

myPopover.dispose()

pagbalinen

Mangted ti popover ti maysa nga elemento ti abilidad a maipakita. Dagiti popover ket napalubosan babaen ti default.

myPopover.enable()

awan ti kabaelan

Ikkaten ti abilidad para iti popover ti maysa nga elemento a maipakita. Mabalin laeng a maipakita ti popover no ma-enable manen.

myPopover.disable()

toggleNaipalubosan

I-toggles ti abilidad para iti popover ti maysa nga elemento a maipakita wenno mailemmeng.

myPopover.toggleEnabled()

pabaroen

Ipabaro ti posision ti popover ti maysa nga elemento.

myPopover.update()

makaala tiInstansia

Estatiko a pamay-an a mangipalubos kenka a makaala ti popover a pagarigan a nainaig iti maysa nga elemento ti DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

makaalaWennoAgaramid itiInstansia

Estatiko a pamay-an a mangipalubos kenka a makaala ti popover a pagarigan a nainaig iti maysa nga elemento ti DOM, wenno mangpartuat ti baro no kas pagarigan saan a nairugi

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Dagiti Pasamak

Kita ti pasamak Panangiladawan
ipakita.bs.popover Daytoy a pasamak ket agputok a dagus no ti showpamay-an ti pagarigan ket maawagan.
naipakita.bs.popover Daytoy a pasamak ket mapaputok no ti popover ket naaramiden a makita ti agar-aramat (urayennanto dagiti panagbalbaliw ti CSS a malpas).
ilemmeng.bs.popover Daytoy a pasamak ket dagus a mapaputok no ti hidepamay-an ti pagarigan ket naawagan.
nailemmeng.bs.napanglaw Daytoy a pasamak ket mapaputok no ti popover ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas).
naikabil.bs.popover Daytoy a pasamak ket mapaputok kalpasan ti show.bs.popoverpasamak no ti plantilia ti popover ket nainayon iti DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})