Pitani kuzinthu zazikulu Pitani kumayendedwe adocs
Check
in English

Popovers

Zolemba ndi zitsanzo zowonjezerera ma popover a Bootstrap, monga omwe amapezeka mu iOS, pazinthu zilizonse patsamba lanu.

Patsamba ili

Mwachidule

Zomwe muyenera kudziwa mukamagwiritsa ntchito pulogalamu ya popover:

  • Popovers amadalira laibulale ya gulu lachitatu Popper kuti akhazikike. Muyenera kuphatikiza popper.min.js m'mbuyomu bootstrap.js, kapena gwiritsani ntchito bootstrap.bundle.min.jsyomwe ili ndi Popper.
  • Popovers amafuna pulogalamu yowonjezera ya popover ngati kudalira.
  • Ma Popover amasankha kulowa pazifukwa zogwirira ntchito, chifukwa chake muyenera kuziyambitsa nokha .
  • Ziro-utali titlendi contentzikhalidwe sizidzawonetsa popover.
  • Nenani container: 'body'kuti mupewe kupereka zovuta muzinthu zovuta kwambiri (monga magulu athu olowetsa, magulu a batani, ndi zina).
  • Kuyambitsa popover pazinthu zobisika sikungagwire ntchito.
  • Popovers .disabledkapena disabledzinthu ziyenera kuyambitsidwa pa chinthu chomangira.
  • Zikayambidwa kuchokera ku anangula omwe amazungulira mizere ingapo, ma popovers amakhala pakati pa nangula wonsewo. Gwiritsani .text-nowrapntchito zanu <a>kuti mupewe izi.
  • Popovers ayenera kubisidwa zinthu zawo zofananira zisanachotsedwe mu DOM.
  • Popovers amatha kuyambika chifukwa cha chinthu chomwe chili mkati mwa mthunzi wa DOM.
Mwachikhazikitso, chigawochi chimagwiritsa ntchito sanitizer yomwe ili mkati, yomwe imachotsa zinthu zilizonse za HTML zomwe siziloledwa. Onani gawo la sanitizer muzolemba zathu za JavaScript kuti mumve zambiri.
Kanema wa gawoli amadalira prefers-reduced-motionfunso la media. Onani gawo lochepetsedwa la zolemba zathu zofikira .

Pitilizani kuwerenga kuti muwone momwe popover amagwirira ntchito ndi zitsanzo zina.

Zitsanzo

Yambitsani popovers

Monga tafotokozera pamwambapa, muyenera kuyambitsa popover musanagwiritse ntchito. Njira imodzi yokhazikitsira ma popovers onse patsamba ingakhale kuwasankha mwamakhalidwe awo data-bs-toggle, monga:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Chiwonetsero chamoyo

Timagwiritsa ntchito JavaScript yofanana ndi mawu apam'mwambawa kuti tipereke zotsatirazi. Mitu imayikidwa kudzera data-bs-titlendipo zomwe zili m'thupi zimayikidwa kudzera data-bs-content.

Khalani omasuka kugwiritsa ntchito titlekapena data-bs-titlemu HTML yanu. Ikagwiritsidwa titlentchito, Popper amazilowetsa m'malo mwake data-bs-titlepomwe chinthucho chikuperekedwa.
html 
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Njira zinayi

Zosankha zinayi zilipo: pamwamba, kumanja, pansi, ndi kumanzere. Mayendedwe amawonetsedwa mukamagwiritsa ntchito Bootstrap mu RTL. Khazikitsani data-bs-placementkusintha kolowera.

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

Mwambocontainer

Mukakhala ndi masitaelo pa chinthu cha makolo chomwe chimasokoneza popover, mudzafuna kufotokoza mwambo containerkuti HTML ya popover iwonekere mkati mwa chinthucho. Izi ndizofala m'matebulo omvera, magulu olowa, ndi zina zotero.

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

Chinthu china chomwe mungafune kukhazikitsa mwambo containerwodziwikiratu ndi popovers mkati mwa dialog modal , kuwonetsetsa kuti popover palokha ikuphatikizidwa ndi modal. Izi ndizofunikira makamaka kwa ma popovers omwe ali ndi zinthu zolumikizana - zokambira zama modal zidzakhazikika, kotero pokhapokha popover ndi gawo lachibwana la modal, ogwiritsa ntchito sangathe kuyang'ana kapena kuyambitsa zinthu izi.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Custom popovers

Yowonjezedwa mu v5.2.0

Mutha kusintha mawonekedwe a popover pogwiritsa ntchito mitundu ya CSS . Timakhazikitsa kalasi yokhazikika data-bs-custom-class="custom-popover"kuti iwonetsere mawonekedwe athu ndikugwiritsa ntchito kupitilira zina mwazosintha za CSS.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}
html 
<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

Chotsani mukadina kwina

Gwiritsani ntchito focuschoyambitsacho kuti muchotse zotulukapo pakadina kotsatira kwa wogwiritsa wa chinthu china kusiyana ndi chinthu chosinthira.

Chizindikiro china chofunikira pakuchotsa-pa-kudina-kotsatira

Kuti mugwiritse ntchito msakatuli woyenera komanso papulatifomu, muyenera kugwiritsa ntchito tag <a>, osati<button> tag, komanso muyenera kuphatikizanso mawonekedwe tabindex.

Poover yochotsedwa
html 
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
const popover = new bootstrap.Popover('.popover-dismiss', {
  trigger: 'focus'
})

Zinthu zolemala

Zinthu zomwe zili ndi mawonekedwe disabledake sizimalumikizana, kutanthauza kuti ogwiritsa ntchito sangasunthe kapena kuzidina kuti ayambitse popover (kapena chida). Monga njira yogwirira ntchito, mudzafuna kuyambitsa popover kuchokera pa chokulunga <div>kapena <span>, chopangidwa kuti chikhale chokhazikika pogwiritsa ntchito tabindex="0".

Pazinthu zoyambitsa popover zolemala, mungakondenso data-bs-trigger="hover focus"kuti popover iwoneke ngati malingaliro apompopompo kwa ogwiritsa ntchito anu chifukwa sangayembekezere kudina chinthu cholemala.

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

CSS

Zosintha

Yowonjezedwa mu v5.2.0

Monga gawo la kusintha kwa CSS kwa Bootstrap, popover tsopano amagwiritsa ntchito zosintha zapa CSS .popoverkuti apititse patsogolo makonda munthawi yeniyeni. Makhalidwe amitundu ya CSS amayikidwa kudzera pa Sass, kotero makonda a Sass akadali othandizidwa, nawonso.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);

Zosintha za Sass

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Kugwiritsa ntchito

Yambitsani popover kudzera pa JavaScript:

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

Kupanga ma popover ntchito kwa ogwiritsa ntchito kiyibodi ndi ukadaulo wothandizira

Kuti mulole ogwiritsa ntchito kiyibodi kuti ayambitse ma popovers anu, muyenera kungowonjezera kuzinthu za HTML zomwe nthawi zambiri zimakhala zokhazikika komanso zolumikizana (monga maulalo kapena zowongolera mawonekedwe). Ngakhale zinthu zosasinthika za HTML (monga <span>s) zitha kukhala zowoneka bwino powonjezera mawonekedwe tabindex="0", izi ziwonjezera zoyimitsa zosokoneza komanso zosokoneza pazinthu zomwe sizimalumikizana ndi ogwiritsa ntchito kiyibodi, ndipo matekinoloje othandizira ambiri pakadali pano salengeza zomwe zili mu popover pakadali pano. . Kuphatikiza apo, musadalire kokha hoverngati choyambitsa ma popover anu, chifukwa izi zipangitsa kuti zikhale zosatheka kuyambitsa ogwiritsa ntchito kiyibodi.

Ngakhale mutha kuyika ma HTML olemera, opangidwa ndi ma popover ndi htmlmwayi, tikupangira kuti mupewe kuwonjezera kuchuluka kwazinthu. Momwe ma popovers amagwirira ntchito pano ndikuti, zikawonetsedwa, zomwe zili ndizomwe zimalumikizidwa ndi zomwe aria-describedbyzimayambitsa. Zotsatira zake, zonse zomwe zili mu popover zidzalengezedwa kwa ogwiritsa ntchito ukadaulo wothandizira ngati mtsinje wautali wosasokonezeka.

Kuphatikiza apo, ngakhale ndikothekanso kuphatikiza zowongolera (monga mawonekedwe amtundu kapena maulalo) mu popover yanu (powonjezera zinthuzi pazovomerezeka allowListndi ma tag), dziwani kuti pakadali pano popover samayang'anira dongosolo la kiyibodi. Wogwiritsa ntchito kiyibodi akatsegula popover, kuyang'ana kumakhalabe pazomwe zikuyambitsa, ndipo monga momwe popover nthawi zambiri samatsata choyambitsacho pamapangidwe a chikalatacho, palibe chitsimikizo kuti kupita patsogolo / kukanikiza.TABidzasuntha wogwiritsa ntchito kiyibodi mu popover yokha. Mwachidule, kungowonjezera maulamuliro olumikizana ku popover kungapangitse zowongolerazi kukhala zosafikirika/zosagwiritsidwa ntchito kwa ogwiritsa ntchito kiyibodi ndi ogwiritsa ntchito matekinoloje othandizira, kapena kupanga dongosolo losamveka bwino. Muzochitika izi, lingalirani kugwiritsa ntchito dialog ya modal m'malo mwake.

Zosankha

Monga zosankha zitha kuperekedwa kudzera pa data kapena JavaScript, mutha kuwonjezera dzina lachisankho ku data-bs-, monga data-bs-animation="{value}". Onetsetsani kuti musinthe mtundu wamtundu wa dzina lachisankho kuchokera ku " camelCase " kupita ku " kebab-case " podutsa zosankha pogwiritsa ntchito zizindikiro za data. Mwachitsanzo, gwiritsani ntchito data-bs-custom-class="beautifier"m'malo mwa data-bs-customClass="beautifier".

Kuyambira pa Bootstrap 5.2.0, zigawo zonse zimathandizira chidziwitso chosungidwa cha data data-bs-configchomwe chingathe kukhazikitsa chigawo chosavuta ngati chingwe cha JSON. Chilichonse chikakhala ndi mawonekedwe , mtengo womaliza udzakhala ndipo mawonekedwe osiyana a data adzapitilira zomwe zaperekedwa data-bs-config='{"delay":0, "title":123}'pa . Kuphatikiza apo, zomwe zilipo kale zimatha kusunga ma JSON monga .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Dziwani kuti pazifukwa zachitetezo sanitize, sanitizeFn, ndi allowListzosankha sizingaperekedwe pogwiritsa ntchito mawonekedwe a data.
Dzina Mtundu Zosasintha Kufotokozera
allowList chinthu Mtengo wofikira Chinthu chomwe chili ndi zovomerezeka ndi ma tag.
animation boolean true Ikani kusintha kwa CSS fade ku popover.
boundary chingwe, element 'clippingParents' Malire oletsa kusefukira a popover (amangokhudza Popper's preventOverflow modifier). Mwachikhazikitso, ndi 'clippingParents'ndipo chitha kuvomereza HTMLElement reference (kudzera JavaScript kokha). Kuti mudziwe zambiri onani zolemba za Popper's detectOverflow .
container chingwe, chinthu, zabodza false Imawonjezera popover ku chinthu china. Chitsanzo: container: 'body'. Izi ndizothandiza makamaka chifukwa zimakulolani kuti muyike popover mukuyenda kwa chikalata pafupi ndi chinthu choyambitsa - chomwe chidzalepheretsa popover kuti asayandamire kuchoka pa chinthu chomwe chikuyambitsa panthawi yosintha zenera.
content chingwe, chinthu, ntchito '' Chitsimikizo cha zinthu ngati data-bs-contentpalibe. Ngati ntchito yaperekedwa, thisidzayitanidwa ndi zolemba zake ku chinthu chomwe popover amamangiriridwa.
customClass chingwe, ntchito '' Onjezani makalasi ku popover ikawonetsedwa. Dziwani kuti makalasi awa adzawonjezedwa kuwonjezera pa makalasi aliwonse omwe afotokozedwa mu template. Kuti muwonjezere makalasi angapo, alekanitseni ndi mipata: 'class-1 class-2'. Mukhozanso kupereka ntchito yomwe iyenera kubweza chingwe chimodzi chokhala ndi mayina owonjezera amagulu.
delay nambala, chinthu 0 Kuchedwetsa kuwonetsa ndi kubisa popover (ms)—sikugwira ntchito pamtundu woyambitsa pamanja. Ngati nambala yaperekedwa, kuchedwetsa kumayikidwa pazithunzi zonse ziwiri. Kapangidwe kazinthu ndi delay: { "show": 500, "hide": 100 }:.
fallbackPlacements string, array ['top', 'right', 'bottom', 'left'] Tanthauzirani malo obwerera m'mbuyo popereka mndandanda wamayikidwe angapo (molingana ndi zokonda). Kuti mudziwe zambiri onani za Popper's behaviour docs .
html boolean false Lolani HTML mu popover. Ngati ndi zoona, ma tag a HTML mu popover's titleadzawonetsedwa mu popover. Ngati zabodza, innerTextkatundu adzagwiritsidwa ntchito kuyika zomwe zili mu DOM. Gwiritsani ntchito mawu ngati mukuda nkhawa ndi kuukira kwa XSS.
offset nambala, chingwe, ntchito [0, 0] Kuchepetsa kwa popover mogwirizana ndi cholinga chake. Mutha kudutsa zingwe zama data okhala ndi ma comma olekanitsidwa monga: data-bs-offset="10,20". Ntchito ikagwiritsidwa ntchito kutsimikizira kuchotsera, imatchedwa ndi chinthu chomwe chili ndi popper, zolozera, ndi popper rects ngati mkangano wake woyamba. Choyambitsa chinthu cha DOM node chimadutsa ngati mkangano wachiwiri. Ntchitoyi iyenera kubweza mndandanda wokhala ndi manambala awiri: skidding , mtunda . Kuti mumve zambiri onani za Popper's offset docs .
placement chingwe, ntchito 'top' Momwe mungayikitsire popover: auto, pamwamba, pansi, kumanzere, kumanja. Zikanenedwa auto, zidzasinthanso popover. Ntchito ikagwiritsidwa ntchito kudziwa malo, imatchedwa ndi popover DOM node ngati mkangano wake woyamba komanso chinthu choyambitsa DOM node ngati yachiwiri. Nkhaniyi thisimayikidwa ku chitsanzo cha popover.
popperConfig null, chinthu, ntchito null Kuti musinthe kasinthidwe ka Popper ka Bootstrap, onani kasinthidwe ka Popper . Ntchito ikagwiritsidwa ntchito kupanga masinthidwe a Popper, imatchedwa ndi chinthu chomwe chili ndi kasinthidwe ka Popper ka Bootstrap. Zimakuthandizani kugwiritsa ntchito ndikuphatikiza zokhazikika ndi kasinthidwe kanu. Ntchitoyi iyenera kubweza chinthu chosinthira cha Popper.
sanitize boolean true Yambitsani kapena kuletsa ukhondo. Ngati adamulowetsa 'template', 'content'ndipo 'title'zosankha zidzayeretsedwa.
sanitizeFn null, ntchito null Apa mutha kupereka ntchito yanu ya sanitize. Izi zitha kukhala zothandiza ngati mukufuna kugwiritsa ntchito laibulale yodzipatulira kuchita ukhondo.
selector chingwe, zabodza false Ngati chosankha chaperekedwa, zinthu za popover zidzaperekedwa ku zomwe zafotokozedwazo. M'malo mwake, izi zimagwiritsidwa ntchito kugwiritsanso ntchito popovers kuzinthu zowonjezera za DOM ( jQuery.onthandizo). Onani nkhaniyi ndi chitsanzo chothandiza .
template chingwe '<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>' Base HTML kuti mugwiritse ntchito popanga popover. Ma popover adzabayidwa titlemu .popover-inner. .popover-arrowadzakhala muvi wa popover. Chovala chakunja chiyenera kukhala ndi .popoverkalasi ndi role="popover".
title chingwe, chinthu, ntchito '' Mtengo wamutu wotsikirapo ngati titlechizindikirocho palibe. Ngati ntchito yaperekedwa, thisidzayitanidwa ndi zolemba zake ku chinthu chomwe popover amamangiriridwa.
trigger chingwe 'hover focus' Momwe popover imayambira: dinani, kusuntha, kuyang'ana, pamanja. Mutha kudutsa zoyambitsa zambiri; alekanitse iwo ndi danga. 'manual'zikuwonetsa kuti popover idzayambika mwadongosolo kudzera pa .popover('show'), .popover('hide')ndi .popover('toggle')njira; mtengo uwu sungathe kuphatikizidwa ndi choyambitsa china chilichonse. 'hover'paokha zidzabweretsa ma popover omwe sangayambitsidwe kudzera pa kiyibodi, ndipo ayenera kugwiritsidwa ntchito ngati njira zina zoperekera zidziwitso zomwezo kwa ogwiritsa ntchito kiyibodi zilipo.

Mawonekedwe a data pamapopovers apawokha

Zosankha za popovers pawokha zitha kufotokozedwa mwanjira ina pogwiritsa ntchito mawonekedwe a data, monga tafotokozera pamwambapa.

Kugwiritsa ntchito ndipopperConfig 

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

Njira

Asynchronous njira ndi kusintha

Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .

Onani zolemba zathu za JavaScript kuti mudziwe zambiri .

Njira Kufotokozera
disable Imachotsa kuthekera kwa popover ya chinthu kuti iwonetsedwe. Popover imatha kuwonetsedwa ngati iyatsidwanso.
dispose Imabisa ndikuwononga popover ya chinthu (Imachotsa zosungidwa pa chinthu cha DOM). Ma Popovers omwe amagwiritsa ntchito kugawira ena (omwe amapangidwa pogwiritsa ntchito selectormwayi ) sangawonongedwe paokha pazoyambitsa zoyambitsa.
enable Zimapereka mwayi wowoneka bwino wa element. Popovers amayatsidwa mwachisawawa.
getInstance Njira yosasunthika yomwe imakupatsani mwayi wopeza mawonekedwe a popover olumikizidwa ndi chinthu cha DOM .
getOrCreateInstance Njira yosasunthika yomwe imakupatsani mwayi wopeza mawonekedwe a popover olumikizidwa ndi chinthu cha DOM, kapena pangani china china ngati sichinayambike.
hide Imabisa kuchuluka kwa zinthu. Imabwereranso kwa woyimba foniyo isanabisike (ie zisanachitike hidden.bs.popover). Izi zimaganiziridwa kuti ndi "zamanja" zoyambitsa popover.
setContent Amapereka njira yosinthira zomwe zili mu popover pambuyo poyambitsa.
show Imawulula kuchuluka kwa zinthu. Imabwereranso kwa woyimba foniyo isanawonetsedwe (ie zisanachitike shown.bs.popover). Izi zimaganiziridwa kuti ndi "zamanja" zoyambitsa popover. Ma Popovers omwe mutu wawo ndi zomwe zili muutali wa ziro sizimawonetsedwa.
toggle Imasintha kuphulika kwa chinthu. Imabwereranso kwa woyimba foniyo isanawonetsedwe kapena kubisidwa (ie zisanachitike shown.bs.popoverkapena hidden.bs.popoverchochitikacho). Izi zimaganiziridwa kuti ndi "zamanja" zoyambitsa popover.
toggleEnabled Imasintha kuthekera kwa kufalikira kwa chinthu kuti chiwoneke kapena kubisika.
update Imasinthiratu pomwe zinthu zachuluka. 
// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})
Njirayi setContentimavomereza objectmkangano, pomwe fungulo lililonse la katundu ndilosankha bwino stringmkati mwa template ya popover, ndipo mtengo uliwonse wokhudzana ndi katundu ukhoza kukhala string| element| | function| | null

Zochitika

Chochitika Kufotokozera
hide.bs.popover Chochitika ichi chimachotsedwa nthawi yomweyo pamene hidenjira yachitsanzo yayitanidwa.
hidden.bs.popover Chochitikachi chimachotsedwa pamene popover yatha kubisidwa kwa wogwiritsa ntchito (idikirira kuti kusintha kwa CSS kumalize).
inserted.bs.popover Chochitikachi chimachotsedwa pambuyo pa show.bs.popoverchochitikacho pamene template ya popover yawonjezedwa ku DOM.
show.bs.popover Chochitika ichi chimayaka nthawi yomweyo shownjira yachitsanzo itayitanidwa.
shown.bs.popover Chochitikachi chimachotsedwa pamene popover yawonetsedwa kwa wogwiritsa ntchito (idzadikirira kuti kusintha kwa CSS kumalize). 
const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})