Popovers

Nyaraka na mifano ya kuongeza popover za Bootstrap, kama zile zinazopatikana katika iOS, kwa kipengele chochote kwenye tovuti yako.

Katika ukurasa huu

Muhtasari

Mambo ya kujua unapotumia programu-jalizi ya popover:

Popovers hutegemea maktaba ya watu wengine Popper kwa nafasi. Ni lazima ujumuishe popper.min.js kabla ya bootstrap.js, au utumie bootstrap.bundle.min.jsiliyo na Popper.
Popover zinahitaji programu- jalizi ya popover kama tegemezi.
Popover wamejijumuisha kwa sababu za utendakazi, kwa hivyo ni lazima uanzishe wewe mwenyewe .
Urefu wa sifuri titlena contentmaadili hayatawahi kuonyesha popover.
Bainisha container: 'body'ili kuepuka kutoa matatizo katika vipengele changamano zaidi (kama vile vikundi vyetu vya ingizo, vikundi vya vitufe, n.k).
Kuanzisha popover kwenye vipengee vilivyofichwa haitafanya kazi.
Popovers kwa .disabledau disabledvipengele lazima kuanzishwa kwenye kipengele wrapper.
Inapoanzishwa kutoka kwa nanga zinazozunguka mistari mingi, popover zitawekwa katikati kati ya upana wa jumla wa nanga. Tumia .text-nowrapkwenye yako <a>ili kuepuka tabia hii.
Watu masikini lazima wafichwe kabla vipengele vyao vinavyolingana viondolewe kwenye DOM.
Popovers inaweza kuanzishwa shukrani kwa kipengele ndani ya kivuli DOM.

Kwa chaguomsingi, kipengee hiki hutumia kisafishaji cha maudhui kilichojengewa ndani, ambacho huondoa vipengele vyovyote vya HTML ambavyo haviruhusiwi kwa uwazi. Tazama sehemu ya sanitizer katika hati zetu za JavaScript kwa maelezo zaidi.

Athari ya uhuishaji ya kipengele hiki inategemea prefers-reduced-motionhoja ya midia. Tazama sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .

Endelea kusoma ili kuona jinsi popover hufanya kazi na baadhi ya mifano.

Mifano

Washa popovers

Kama ilivyoelezwa hapo juu, lazima uanzishe popover kabla ya kutumika. Njia moja ya kuanzisha popover zote kwenye ukurasa itakuwa kuzichagua kwa data-bs-togglesifa zao, kama hivyo:

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

Onyesho la moja kwa moja

Tunatumia JavaScript sawa na kijisehemu kilicho hapo juu ili kutoa popover ifuatayo ya moja kwa moja. Mada huwekwa kupitia data-bs-titlena maudhui ya mwili huwekwa kupitia data-bs-content.

Jisikie huru kutumia aidha titleau data-bs-titlekatika HTML yako. Inapotumika title, Popper itaibadilisha kiotomatiki na data-bs-titlekipengele kinapotolewa.

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>

Maelekezo manne

Chaguzi nne zinapatikana: juu, kulia, chini na kushoto. Maelekezo yanaangaziwa unapotumia Bootstrap katika RTL. Weka data-bs-placementili kubadilisha mwelekeo.

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>

Desturi`container`

Unapokuwa na mitindo fulani kwenye kipengee kikuu ambacho huingilia popover, utataka kubainisha desturi containerili HTML ya popover ionekane ndani ya kipengele hicho badala yake. Hii ni kawaida katika majedwali jibu, vikundi vya ingizo, na kadhalika.

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

Hali nyingine ambapo utataka kuweka mila iliyo wazi containerni popover ndani ya modal dialog , ili kuhakikisha kuwa popover yenyewe imeambatishwa kwa modali. Hili ni muhimu sana kwa popover ambazo zina vipengele wasilianifu - mazungumzo ya modali yatavutia umakini, kwa hivyo isipokuwa popover ni kipengele cha watoto cha modali, watumiaji hawataweza kuzingatia au kuwezesha vipengele hivi wasilianifu.

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

Popovers maalum

Imeongezwa katika v5.2.0

Unaweza kubinafsisha mwonekano wa popover kwa kutumia vigeu vya CSS . Tunaweka darasa maalum data-bs-custom-class="custom-popover"ili kupeana mwonekano wetu maalum na kulitumia kubatilisha baadhi ya vigeu vya CSS vya ndani.

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

Ondoa kwa kubofya ijayo

Tumia focuskichochezi ili kuondoa popover kwenye mbofyo unaofuata wa mtumiaji wa kipengele tofauti na kipengele cha kugeuza.

Lebo mahususi inahitajika kwa ajili ya kuondoa-on-ifuatayo

Kwa tabia sahihi ya kivinjari na jukwaa-tofauti, lazima utumie <a>lebo, sio lebo <button>, na lazima pia ujumuishe tabindexsifa.

popover inayoondolewa

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

Vipengele vilivyozimwa

Vipengele vilivyo na disabledsifa havitumiki, kumaanisha kuwa watumiaji hawawezi kuelea au kuvibofya ili kuanzisha popover (au kidokezo). Kama suluhisho, utataka kuibua popover kutoka kwa kanga <div>au <span>, iliyofanywa kwa njia bora ya kulenga kibodi kwa kutumia tabindex="0".

Kwa vichochezi vya popover vilivyozimwa, unaweza pia kupendelea data-bs-trigger="hover focus"ili popover ionekane kama maoni ya papo hapo kwa watumiaji wako kwani hawatarajii kubofya kipengele kilichozimwa.

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

Vigezo

Imeongezwa katika v5.2.0

Kama sehemu ya mkabala wa mabadiliko ya vigeu vya CSS ya Bootstrap, popover sasa hutumia viwezo vya ndani vya CSS .popoverili kuboresha ubinafsishaji wa wakati halisi. Thamani za anuwai za CSS zimewekwa kupitia Sass, kwa hivyo ubinafsishaji wa Sass bado unatumika, pia.

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

Vigezo vya 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;

Matumizi

Washa popover kupitia JavaScript:

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

Kufanya popover kufanya kazi kwa watumiaji wa kibodi na teknolojia saidizi

Ili kuruhusu watumiaji wa kibodi kuwezesha popover zako, unapaswa kuziongeza tu kwenye vipengele vya HTML ambavyo kwa kawaida vinaweza kuangazia kibodi na shirikishi (kama vile viungo au vidhibiti vya fomu). Ingawa vipengele vya HTML vya kiholela (kama vile <span>s) vinaweza kuzingatiwa kwa kuongeza tabindex="0"sifa, hii itaongeza vichupo vinavyoweza kuudhi na kutatanisha kwenye vipengele visivyoingiliana kwa watumiaji wa kibodi, na teknolojia nyingi za usaidizi kwa sasa hazitangazi maudhui ya popover katika hali hii. . Zaidi ya hayo, usitegemee pekee hoverkama kichochezi cha popover zako, kwa kuwa hii itawafanya wasiweze kuwasha watumiaji wa kibodi.

Ingawa unaweza kuingiza HTML tajiri, iliyopangwa katika popover na htmlchaguo, tunapendekeza sana uepuke kuongeza maudhui mengi kupita kiasi. Jinsi popover hufanya kazi kwa sasa ni kwamba, mara tu zinapoonyeshwa, maudhui yao yanaunganishwa na kipengele cha trigger na aria-describedbysifa. Kwa hivyo, maudhui yote ya popover yatatangazwa kwa watumiaji wa teknolojia ya usaidizi kama mtiririko mmoja mrefu usiokatizwa.

Zaidi ya hayo, ingawa inawezekana pia kujumuisha vidhibiti shirikishi (kama vile vipengele vya fomu au viungo) kwenye popover yako (kwa kuongeza vipengele hivi kwenye allowListsifa na lebo zinazoruhusiwa), fahamu kwamba kwa sasa popover haidhibiti mpangilio wa ulengaji wa kibodi. Mtumiaji wa kibodi anapofungua popover, umakini hubaki kwenye kipengee cha kuamsha, na kwa vile popover kwa kawaida hafuati kichochezi mara moja katika muundo wa hati, hakuna hakikisho kwamba kusonga mbele/kubonyeza.TABitahamisha mtumiaji wa kibodi kwenye popover yenyewe. Kwa kifupi, kuongeza tu vidhibiti shirikishi kwenye popover kuna uwezekano wa kufanya vidhibiti hivi visifikiwe/kutotumika kwa watumiaji wa kibodi na watumiaji wa teknolojia saidizi, au angalau kufanya mpangilio wa umakini wa jumla usio na mantiki. Katika hali hizi, zingatia kutumia mazungumzo ya modal badala yake.

Chaguo

Kwa vile chaguo zinaweza kupitishwa kupitia sifa za data au JavaScript, unaweza kuongeza jina la chaguo kwa data-bs-, kama katika data-bs-animation="{value}". Hakikisha umebadilisha aina ya kipochi cha jina la chaguo kutoka " camelCase " hadi " kebab-case " wakati wa kupitisha chaguo kupitia sifa za data. Kwa mfano, tumia data-bs-custom-class="beautifier"badala ya data-bs-customClass="beautifier".

Kufikia Bootstrap 5.2.0, vipengee vyote vinaauni sifa ya data iliyohifadhiwa ya majaribiodata-bs-config ambayo inaweza kuweka usanidi wa sehemu rahisi kama mfuatano wa JSON. Wakati kipengele kina data-bs-config='{"delay":0, "title":123}'na data-bs-title="456"sifa, titlethamani ya mwisho itakuwa 456na sifa tofauti za data zitabatilisha thamani zilizotolewa kwenye data-bs-config. Kwa kuongezea, sifa zilizopo za data zinaweza kuweka maadili ya JSON kama data-bs-delay='{"show":0,"hide":150}'.

Kumbuka kuwa kwa sababu za usalama sanitize, sanitizeFn, na allowListchaguzi haziwezi kutolewa kwa kutumia sifa za data.

Jina	Aina	Chaguomsingi	Maelezo
`allowList`	kitu	Thamani chaguomsingi	Kitu ambacho kina sifa na lebo zinazoruhusiwa.
`animation`	boolean	`true`	Tumia mpito wa kufifisha wa CSS kwenye popover.
`boundary`	kamba, kipengele	`'clippingParents'`	Kizuizi cha kufurika cha mpaka wa popover (hutumika tu kwa kirekebishaji cha Popper cha kuzuiaOverflow). Kwa chaguo-msingi, ni `'clippingParents'`na inaweza kukubali rejeleo la HTMLElement (kupitia JavaScript pekee). Kwa maelezo zaidi rejelea hati za detectOverflow za Popper .
`container`	kamba, kipengele, uongo	`false`	Huongeza popover kwa kipengele maalum. Mfano `container: 'body'`:. Chaguo hili ni muhimu sana kwa kuwa hukuruhusu kuweka popover katika mtiririko wa hati karibu na kipengee cha kuchochea - ambayo itazuia popover kuelea kutoka kwa kipengele cha kuchochea wakati wa kubadilisha ukubwa wa dirisha.
`content`	kamba, kipengele, kazi	`''`	Thamani chaguo-msingi ya maudhui ikiwa `data-bs-content`sifa haipo. Ikiwa kipengele cha kukokotoa kitatolewa, kitaitwa na `this`marejeleo yake yamewekwa kwa kipengele ambacho popover imeambatishwa.
`customClass`	kamba, kazi	`''`	Ongeza madarasa kwenye popover inapoonyeshwa. Kumbuka kuwa madarasa haya yataongezwa pamoja na madarasa yoyote yaliyobainishwa kwenye kiolezo. Ili kuongeza madarasa mengi, yatenganishe na nafasi: `'class-1 class-2'`. Unaweza pia kupitisha chaguo za kukokotoa ambazo zinapaswa kurudisha mfuatano mmoja ulio na majina ya ziada ya darasa.
`delay`	nambari, kitu	`0`	Kuchelewesha kuonyesha na kuficha popover (ms)—hakutumiki kwa aina ya kichochezi mwenyewe. Nambari ikitolewa, ucheleweshaji unatumika kwa Ficha/onyesho zote mbili. Muundo wa kitu ni `delay: { "show": 500, "hide": 100 }`:.
`fallbackPlacements`	kamba, safu	`['top', 'right', 'bottom', 'left']`	Bainisha uwekaji nyuma kwa kutoa orodha ya uwekaji katika safu (kwa mpangilio wa upendeleo). Kwa habari zaidi rejelea hati za tabia za Popper .
`html`	boolean	`false`	Ruhusu HTML kwenye popover. Ikiwa ni kweli, lebo za HTML kwenye popover `title`zitatolewa katika popover. Ikiwa sivyo, `innerText`kipengele kitatumika kuingiza maudhui kwenye DOM. Tumia maandishi ikiwa una wasiwasi kuhusu mashambulizi ya XSS.
`offset`	nambari, kamba, kazi	`[0, 0]`	Kukabiliana na popover kuhusiana na lengo lake. Unaweza kupitisha mfuatano katika sifa za data na maadili yaliyotenganishwa kwa koma kama: `data-bs-offset="10,20"`. Wakati kipengele cha chaguo za kukokotoa kinapotumiwa kubainisha urekebishaji, huitwa na kitu kilicho na uwekaji wa popper, rejeleo, na miondoko ya popper kama hoja yake ya kwanza. Kipengele cha kuchochea nodi ya DOM hupitishwa kama hoja ya pili. Chaguo la kukokotoa lazima lirudishe safu iliyo na nambari mbili: kuteleza , umbali . Kwa maelezo zaidi rejelea hati za kukabiliana na Popper .
`placement`	kamba, kazi	`'top'`	Jinsi ya kuweka popover: otomatiki, juu, chini, kushoto, kulia. Wakati `auto`imebainishwa, itaelekeza upya popover kwa nguvu. Chaguo za kukokotoa zinapotumiwa kubainisha uwekaji, huitwa na nodi ya popover DOM kama hoja yake ya kwanza na kipengele cha kuanzisha nodi ya DOM kama ya pili. `this`Muktadha umewekwa kwa mfano wa popover .
`popperConfig`	null, kitu, kazi	`null`	Ili kubadilisha usanidi chaguo-msingi wa Bootstrap wa Popper, angalia usanidi wa Popper . Chaguo za kukokotoa zinapotumiwa kuunda usanidi wa Popper, huitwa na kitu ambacho kina usanidi chaguo-msingi wa Bootstrap wa Popper. Inakusaidia kutumia na kuunganisha chaguo-msingi na usanidi wako mwenyewe. Chaguo la kukokotoa lazima lirudishe kipengee cha usanidi kwa Popper.
`sanitize`	boolean	`true`	Washa au lemaza usafishaji. Ikiwashwa `'template'`, `'content'`na `'title'`chaguzi zitasafishwa.
`sanitizeFn`	null, kazi	`null`	Hapa unaweza kusambaza kazi yako ya kusafisha. Hii inaweza kuwa muhimu ikiwa unapendelea kutumia maktaba maalum kutekeleza usafi wa mazingira.
`selector`	kamba, uongo	`false`	Iwapo kiteuzi kitatolewa, vipengee vya popover vitakabidhiwa kwa malengo yaliyobainishwa. Katika mazoezi, hii inatumika pia kutumia popover kwa vipengele vilivyoongezwa vya DOM ( `jQuery.on`usaidizi). Tazama toleo hili na mfano wa kuelimisha .
`template`	kamba	`'<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'`	HTML msingi ya kutumia wakati wa kuunda popover. popover's `title`itakuwa hudungwa katika `.popover-inner`. `.popover-arrow`itakuwa mshale wa popover. Kipengele cha kanga cha nje kinapaswa kuwa na `.popover`darasa na `role="popover"`.
`title`	kamba, kipengele, kazi	`''`	Thamani chaguo-msingi ya kichwa ikiwa `title`sifa haipo. Ikiwa kipengele cha kukokotoa kitatolewa, kitaitwa na `this`marejeleo yake yamewekwa kwa kipengele ambacho popover imeambatishwa.
`trigger`	kamba	`'hover focus'`	Jinsi popover inavyoanzishwa: bofya, elea, zingatia, mwongozo. Unaweza kupitisha vichochezi vingi; kuwatenganisha na nafasi. `'manual'`inaonyesha kuwa popover itaanzishwa kwa utaratibu kupitia `.popover('show')`, `.popover('hide')`na `.popover('toggle')`mbinu; thamani hii haiwezi kuunganishwa na kichochezi kingine chochote. `'hover'`yenyewe itasababisha popover ambazo haziwezi kuanzishwa kupitia kibodi, na zinapaswa kutumika tu ikiwa mbinu mbadala za kuwasilisha taarifa sawa kwa watumiaji wa kibodi zipo.

Sifa za data kwa popovers binafsi

Chaguo za popover binafsi zinaweza kubainishwa kwa kutumia sifa za data, kama ilivyoelezwa hapo juu.

Kutumia kipengele na`popperConfig`

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

Mbinu

Njia za Asynchronous na mabadiliko

Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .

Tazama hati zetu za JavaScript kwa maelezo zaidi .

Njia	Maelezo
`disable`	Huondoa uwezo wa popover ya kipengele kuonyeshwa. Popover itaweza tu kuonyeshwa ikiwa imewashwa tena.
`dispose`	Huficha na kuharibu popover ya kipengele (Huondoa data iliyohifadhiwa kwenye kipengele cha DOM). Popovers zinazotumia utumaji kaumu (ambazo zinaundwa kwa kutumia chaguo )`selector` haziwezi kuharibiwa kibinafsi kwenye vipengele vya vichochezi vya kizazi.
`enable`	Huipa popover ya kipengele uwezo wa kuonyeshwa. Popover huwezeshwa kwa chaguo-msingi.
`getInstance`	Njia tuli ambayo hukuruhusu kupata mfano wa popover unaohusishwa na kipengee cha DOM.
`getOrCreateInstance`	Mbinu tuli ambayo hukuruhusu kupata mfano wa popover unaohusishwa na kipengee cha DOM, au uunde kipya ikiwa hakijaanzishwa.
`hide`	Huficha popover ya kipengele. Hurejesha kwa mpigaji simu kabla popover haijafichwa (yaani kabla ya `hidden.bs.popover`tukio kutokea). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover.
`setContent`	Hutoa njia ya kubadilisha maudhui ya popover baada ya kuanzishwa kwake.
`show`	Hufichua popover ya kipengele. Hurejesha kwa mpigaji simu kabla popover haijaonyeshwa (yaani kabla ya `shown.bs.popover`tukio kutokea). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover. Popovers ambao mada na maudhui yao ni ya urefu wa sifuri hayaonyeshwa kamwe.
`toggle`	Hugeuza popover ya kipengele. Hurejesha kwa mpigaji simu kabla popover haijaonyeshwa au kufichwa (yaani kabla ya tukio `shown.bs.popover`au `hidden.bs.popover`tukio). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover.
`toggleEnabled`	Hugeuza uwezo wa popover ya kipengele kuonyeshwa au kufichwa.
`update`	Inasasisha nafasi ya popover ya kipengele.

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

Mbinu setContentinakubali objecthoja, ambapo kila ufunguo wa mali ni stringkiteuzi halali ndani ya kiolezo cha popover, na kila thamani ya mali inayohusiana inaweza kuwa string| element| function| null

Matukio

Tukio	Maelezo
`hide.bs.popover`	Tukio hili linafutwa mara moja wakati `hide`njia ya mfano imeitwa.
`hidden.bs.popover`	Tukio hili linafutwa wakati popover imekamilika kufichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika).
`inserted.bs.popover`	Tukio hili limefutwa baada ya `show.bs.popover`tukio wakati kiolezo cha popover kimeongezwa kwenye DOM.
`show.bs.popover`	Tukio hili huwaka mara moja wakati `show`njia ya mfano inaitwa.
`shown.bs.popover`	Tukio hili linafutwa wakati popover imefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika).

const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})

Popovers

Muhtasari

Mifano

Washa popovers

Onyesho la moja kwa moja

Maelekezo manne

Desturicontainer

Popovers maalum

Ondoa kwa kubofya ijayo

Lebo mahususi inahitajika kwa ajili ya kuondoa-on-ifuatayo

Vipengele vilivyozimwa

CSS

Vigezo

Vigezo vya Sass

Matumizi

Kufanya popover kufanya kazi kwa watumiaji wa kibodi na teknolojia saidizi

Chaguo

Sifa za data kwa popovers binafsi

Kutumia kipengele napopperConfig

Mbinu

Njia za Asynchronous na mabadiliko

Matukio

Desturi`container`

Kutumia kipengele na`popperConfig`