Tlolela go diteng tše kgolo Tlolela go docs navigation
Check
in English

Dipopovers

Ditokomane le mehlala ya go oketša di-popover tša Bootstrap, go swana le tšeo di hwetšwago go iOS, go elemente efe goba efe mo saeteng ya gago.

Letlakaleng le

Kakaretšo

Dilo tšeo o swanetšego go di tseba ge o diriša plugin ya popover:

  • Popovers itšetlehile ka mokga wa boraro bokgobapuku Popper bakeng sa positioning. O swanetše go akaretša popper.min.js pele ga bootstrap.js, goba o šomiše e tee bootstrap.bundle.min.jsyeo e nago le Popper.
  • Popovers hloka popover plugin e le ho itšetleha.
  • Popovers ke opt-in ka mabaka a tshebetso, kahoo o lokela ho initialize bona ka bowena .
  • Zero-bolelele titlele contentboleng ba ke ke ba bontša popover.
  • Laetša container: 'body'go efoga mathata a go tšweletša ka dikarolo tše di raraganego kudu (go swana le dihlopha tša rena tša go tsenya, dihlopha tša dikonope, bj.bj.).
  • Go hlohleletša di-popovers go dielemente tše di utilwego go ka se šome.
  • Dipopo tša .disabledgoba disableddielemente di swanetše go hlohleletša godimo ga elemente ya go phuthela.
  • Ge di hlohleletšwa go tšwa go ditshetledi tšeo di phuthelago go putla mela e mentši, di-popover di tla tsepama magareng ga bophara bja kakaretšo bja ditshetledi. Diriša .text-nowrapgo s ya gago <a>go efoga boitshwaro bjo.
  • Dipopovers di swanetše go utilwe pele ga ge dielemente tša tšona tše di swanetšego di tlošitšwe go tšwa go DOM.
  • Popovers ka hlohleletšwa ka lebaka la elemente ka gare ga DOM ya moriti.
Ka go ikemela, karolo ye e šomiša sehlatswa diteng seo se agetšwego ka gare, seo se hlobolago dielemente dife goba dife tša HTML tšeo di sa dumelelwago ka go lebanya. Bona karolo ya sanitizer ka go ditokomane tša rena tša JavaScript bakeng sa dintlha tše dingwe.
Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

Tšwela pele o bala go bona kamoo di-popover di šomago ka gona ka mehlala e mengwe.

Mehlala

Kgontšha di-popovers

Bjalo ka ge go boletšwe ka mo godimo, o swanetše go thoma di-popover pele di ka šomišwa. Tsela e nngwe ya go thoma di-popover ka moka letlakaleng e be e tla ba go di kgetha ka data-bs-toggleseka sa tšona, go swana le bjalo:

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

Demo e phelang

Re šomiša JavaScript ye e swanago le seripa se se lego ka mo godimo go tšweletša popover ye e latelago ye e phelago. Dihlogo di bewa ka data-bs-titlegomme diteng tša mmele di bewa ka data-bs-content.

Ikwe o lokologile go diriša e nngwe titlegoba data-bs-titleka go HTML ya gago. Ge titlee šomišwa, Popper e tla e tšeela legato ka go itiragalela ka data-bs-titlege elemente e tšweletšwa.
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>

Ditaelo tše nne

Dikgetho tše nne di a hwetšagala: godimo, ka go le letona, ka tlase le ka go le letshadi. Ditaelo di bonagatšwa ge o diriša Bootstrap ka go RTL. Beakanya data-bs-placementgo fetola tsela.

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>

Tlwaelocontainer

Ge o na le ditaele tše dingwe go elemente ya motswadi tšeo di šitišago popover, o tla nyaka go laetša tlwaelo containergore HTML ya popover e tšwelele ka gare ga elemente yeo go e na le moo. Se se tlwaelegile ditafoleng tše di arabelago, dihlopheng tša go tsenya le tše dingwe tše bjalo.

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

Boemo bjo bongwe moo o tlago go nyaka go beakanya tlwaelo ye e lego pepeneneng containerke di-popovers ka gare ga poledišano ya modal , go kgonthiša gore popover ka boyona e tlaleleditšwe go modal. Se se bohlokwa kudu go di-popover tšeo di nago le dielemente tša tirišano – dipoledišano tša modal di tla swara go tsepamiša kgopolo, ka fao ntle le ge popover e le elemente ya ngwana ya modal, badiriši ba ka se kgone go tsepamiša kgopolo goba go tsenya tirišong dielemente tše tša tirišano.

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

Di-popovers tša tlwaelo

E okeditšwe ka go v5.2.0

O ka tlwaetša ponagalo ya dipopovers o diriša diphetogo tša CSS . Re beakanya sehlopha sa tlwaelo ka data-bs-custom-class="custom-popover"go scope ponagalo ya rena ya tlwaelo gomme re e šomiša go tloša tše dingwe tša diphetogo tša selegae tša 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>

Raka ka tobetsa e latelang

Šomiša focussešušumeletši go lahla dipopover go klika ye e latelago ya mosediriši ya elemente ye e fapanego go feta elemente ya go fetoša.

Go nyakega go swaya mo go itšego bakeng sa go raka-go-klika-go-kgotla mo go latelago

Bakeng sa boitshwaro bjo bo swanetšego bja sefapano sa sephephediši le sefapano sa sefala, o swanetše go šomiša <a>leswao, e sego<button> leswao, gomme gape o swanetše go akaretša tabindexseka.

Popover yeo e lahlwago
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'
})

Dielemente tše di golofetšego

Dielemente tše di nago le disabledseka ga di na tirišano, go ra gore badiriši ba ka se kgone go hover goba go di klika go hlohleletša popover (goba tooltip). Bjalo ka tharollo, o tla nyaka go hlohleletša popover go tšwa go sephuthedi <div>goba <span>, ka mo go swanetšego e dirilwe gore e tsepamiše khiibotong ka go diriša tabindex="0".

Bakeng sa dihlohleletši tša popover tše di golofetšego, o ka rata gape data-bs-trigger="hover focus"gore popover e tšwelele bjalo ka ditshwaotshwao tša pono tša ka pela go badiriši ba gago ka ge ba ka no se letele go kgotla elemente ye e golofetšego.

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

Diphetogo

E okeditšwe ka go v5.2.0

Bjalo ka karolo ya go batamela ga diphetogo tša CSS tša Bootstrap tšeo di tšwelelago, di-popover bjale di diriša diphetogo tša CSS tša lefelong leo godimo .popoverbakeng sa go tlwaetša ka nako ya kgonthe mo go kaonefaditšwego. Ditekanyetšo tša diphetogo tša CSS di beakantšwe ka Sass, ka fao go tlwaetša Sass go sa thekgwa, le gona.

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

Diphetogo tša 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;

Tšhomišo

Kgontšha di-popover ka JavaScript:

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

Go dira gore dipopovers di šome go badiriši ba khiiboto le theknolotši ya go thuša

Go dumelela badiriši ba khiiboto go tsenya tirišong dipopover tša gago, o swanetše go di oketša fela go dielemente tša HTML tšeo ka setšo di lebanego le khiiboto le go dirišana (go swana le dikgokagano goba ditaolo tša foromo). Le ge e le gore dielemente tša HTML tša boithatelo (tše bjalo ka <span>s) di ka dirwa gore di tsepamiše kgopolo ka go oketša tabindex="0"seka, se se tla oketša go ema ga dithepo tšeo di ka bago tše di tenago le tše di gakantšhago go dielemente tšeo e sego tša tirišano bakeng sa badiriši ba khiiboto, gomme bontši bja theknolotši ya go thuša ga bjale ga e tsebiše diteng tša popover boemong bjo . Go tlaleletša, o se ke wa ithekga feela ka hoverbjalo ka selo seo se hlohleletšago di-popover tša gago, ka ge se se tla dira gore di se kgonege go di hlohleletša bakeng sa badiriši ba khiiboto.

Le ge o ka tsenya HTML ye e humilego, ye e rulagantšwego ka go dipopover ka htmlkgetho, re kgothaletša ka maatla gore o efoge go oketša palo ye e feteletšego ya diteng. Tsela yeo di-popover di šomago ka yona gabjale ke gore, ge di šetše di bontšhitšwe, diteng tša tšona di tlemilwe go elemente ya go hlohleletša ka aria-describedbyseka. Ka lebaka leo, dikagare ka moka tša popover di tla tsebišwa go badiriši ba theknolotši ya go thuša bjalo ka moela o tee wo motelele, wo o sa šitišwego.

Go tlaleletša, le ge go kgonega go akaretša gape le ditaolo tša tirišano (bjalo ka dielemente tša foromo goba dikgokagano) ka go popover ya gago (ka go oketša dielemente tše go ya allowListya dika tše di dumeletšwego le dithepo), ela hloko gore ga bjale popover ga e laole tatelano ya go tsepamiša kgopolo ya khiiboto. Ge modiriši wa khiiboto a bula popover, go tsepamiša kgopolo go dula go elemente yeo e hlohleletšago, gomme ka ge popover gantši e sa latele sešušumetšo ka pela ka sebopegong sa tokomane, ga go na tiišetšo ya gore go tšwela pele/go tobetšaTABe tla šuthiša mosebedisi wa khiiboto ka gare ga popover ka boyona. Ka boripana, go fo oketša ditaolo tša tirišano go popover go na le kgonagalo ya go dira gore ditaolo tše di se fihlelelege/di se šomišwe go badiriši ba khiiboto le badiriši ba theknolotši ya go thuša, goba bonyenyane go dira gore go be le taelo ya go tsepamiša kgopolo ka kakaretšo yeo e sa kwagalego. Maemong a, nagana ka go šomiša poledišano ya modal go e na le moo.

Dikgetho

Bjalo ka ge dikgetho di ka fetišwa ka dika tša datha goba JavaScript, o ka tlaleletša leina la kgetho go data-bs-, bjalo ka go data-bs-animation="{value}". Kgonthiša gore o fetoša mohuta wa molato wa leina la kgetho go tšwa go “ camelCase ” go ya go “ kebab-case ” ge o fetiša dikgetho ka dika tša datha. Ka mohlala, diriša data-bs-custom-class="beautifier"go e na le data-bs-customClass="beautifier".

Go tloga go Bootstrap 5.2.0, dikarolo ka moka di thekga seka sa datha ye e bolokilwego ya tekodata-bs-config yeo e ka beago peakanyo ya karolo ye bonolo bjalo ka thapo ya JSON. Ge elemente e na data-bs-config='{"delay":0, "title":123}'le le data-bs-title="456"dika, boleng bja mafelelo titlee tla ba 456gomme dika tša datha tše di aroganego di tla phaela ka thoko boleng bjo bo filwego go data-bs-config. Go tlaleletša, dika tša datha tše di lego gona di kgona go bea dikelo tša JSON go swana le data-bs-delay='{"show":0,"hide":150}'.

Hlokomela gore ka mabaka a tšhireletšo dikgetho tša sanitize, sanitizeFn, le allowListdi ka se fiwe ka go šomiša dika tša datha.
Leina Mohuta Hlokomologa Tlhalošo
allowList selo Boleng bja go se fetoge Selo seo se nago le dika tše di dumeletšwego le dithepo.
animation boolean ya go swana true Diriša phetogo ya go fifala ya CSS go popover.
boundary thapo, elemente 'clippingParents' Mollwane wa thibelo ya go tlala wa popover (o šoma fela go sefetoši sa preventOverflow sa Popper). Ka go ikemela, ke 'clippingParents'ebile e ka amogela tšhupetšo ya HTMLElement (ka JavaScript fela). Bakeng sa tshedimošo ye ntši lebelela ditokomane tša detectOverflow tša Popper .
container thapo, elements, maaka false E tlaleletša popover go elemente ye e itšego. Mohlala: container: 'body'. Kgetho ye e na le mohola kudu ka gore e go dumelela go bea popover ka go elela ga tokumente kgauswi le elemente ya go hlohleletša - yeo e tlago thibela popover go phaphamala kgole le elemente ya go hlohleletša nakong ya go fetoša bogolo bja lefasetere.
content thapo, elements, mosebetsi '' Boleng bja diteng bja maitirelo ge e data-bs-contentle gore seka se se gona. Ge mošomo o filwe, o tla bitšwa ka thissete ya yona ya tšhupetšo go elemente yeo popover e kgomareditšwego go yona.
customClass thapo, mosebetsi '' Oketša diklase go popover ge e bontšhwa. Hlokomela gore diklase tše di tla okeletšwa go tlaleletša go diklase dife goba dife tše di laeditšwego ka go thempleite. Go oketša diklase tše dintši, di aroganye ka dikgoba: 'class-1 class-2'. O ka fetiša gape mošomo wo o swanetšego go bušetša thapo e tee yeo e nago le maina a tlaleletšo a dihlopha.
delay nomoro, selo 0 Go diega go bontšha le go uta popover (ms)—ga go šome go mohuta wa go hlohleletša ka seatla. Ge e le gore nomoro e filwe, go diega go dirišwa go bobedi go uta/bontšha. Sebopego sa selo ke: delay: { "show": 500, "hide": 100 }.
fallbackPlacements thapo, lenaneo ['top', 'right', 'bottom', 'left'] Hlaloša dipeelo tša go wa morago ka go fa lenaneo la dipeelo ka lenaneong (ka tatelano ya kgetho). Bakeng sa tshedimošo ye ntši lebelela ditokomane tša boitshwaro tša Popper .
html boolean ya go swana false Dumelela HTML ka go popover. Ge e le therešo, dithepo tša HTML ka go popover's titledi tla tšweletšwa ka go popover. Ge e le maaka, innerTextthepa e tla šomišwa go tsenya diteng ka gare ga DOM. Diriša sengwalwa ge e ba o tshwenyegile ka ditlhaselo tša XSS.
offset nomoro, thapo, mosebetsi [0, 0] Offset ya popover leloko le sepheo lona. O ka fetiša thapo ka go dika tša datha ka dikelo tše di arotšwego ka koma go swana le: data-bs-offset="10,20". Ge mošomo o šomišwa go laetša offset, o bitšwa ka selo seo se nago le go bewa ga popper, tšhupetšo, le popper rects bjalo ka ngangišano ya yona ya mathomo. The qholotsa elements DOM noutu e fetisoa e le ngangišano ya bobedi. Mošomo o swanetše go bušetša lenaneo leo le nago le dinomoro tše pedi: go thelela , bokgole . Bakeng sa tshedimošo ye ntši lebelela ditokomane tša offset tša Popper .
placement thapo, mosebetsi 'top' Tsela ya go bea popover: auto, godimo, tlase, le letshadi, le letona. Ge autoe laeditšwe, e tla fetolela popover ka go fetoga. Ge mošomo o šomišwa go bona go bewa, o bitšwa ka noutu ya DOM ya popover bjalo ka ngangišano ya yona ya mathomo le noutu ya DOM ya elemente ye e hlohleletšago bjalo ka noutu ya yona ya bobedi. Seemo thisse beakantšwe go mohlala wa popover.
popperConfig lefeela, selo, mošomo null Go fetoša peakanyo ya Popper ya maitirelo ya Bootstrap, bona peakanyo ya Popper . Ge mošomo o šomišwa go hlama peakanyo ya Popper, e bitšwa ka selo seo se nago le peakanyo ya Popper ya maitirelo ya Bootstrap. E go thuša go šomiša le go kopanya ya go se fetoge le peakanyo ya gago. Mošomo o swanetše go bušetša selo sa peakanyo sa Popper.
sanitize boolean ya go swana true Kgontšha goba go šitiša go hlwekiša. If activated 'template', 'content'le 'title'dikgetho tla sanitized.
sanitizeFn lefeela, mošomo null Mona o ka fana ka mosebetsi wa gago wa sanitize. Se se ka ba le mohola ge o rata go šomiša bokgobapuku bjo bo kgethegilego go dira tlhwekišo.
selector thapo, maaka false Ge e le gore mokgethi o filwe, dilo tša popover di tla abelwa diphetho tše di laeditšwego. Ka go diragatša, se se šomišwa gape go diriša dipopover go dielemente tša DOM tšeo di okeditšwego ka maatla ( jQuery.onthekgo). Bona taba ye le mohlala o rutago .
template thapo '<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>' Thea HTML go šomiša ge o hlama popover. Popover's e titletla hlabja ka gare ga .popover-inner. .popover-arrowe tla fetoga motsu wa popover. Elemente ya sephuthedi sa ka ntle e swanetše go ba le .popoversehlopha le role="popover".
title thapo, elements, mosebetsi '' Boleng bja thaetlele bja maitirelo ge e titlele gore seka se se gona. Ge mošomo o filwe, o tla bitšwa ka thissete ya yona ya tšhupetšo go elemente yeo popover e kgomareditšwego go yona.
trigger thapo 'hover focus' Kamoo popover e hlohleletšwago ka gona: tobetsa, hover, tsepamiša kgopolo, pukwanana. O ka feta dihlohleletši tše dintši; di aroganya ka sekgoba. 'manual'e bontšha gore popover e tla hlohleletša ka lenaneo ka .popover('show'), .popover('hide')le .popover('toggle')mekgwa; boleng bjo bo ka se kopanywe le sešušumeletši se sengwe le se sengwe. 'hover'ka boyona e tla feletša ka di-popovers tšeo di ka se hlohleletšwego ka khiiboto, gomme di swanetše go dirišwa feela ge e ba mekgwa e mengwe ya go fetišetša tshedimošo e swanago bakeng sa badiriši ba khiiboto e le gona.

Data litšobotsi bakeng sa popovers motho ka mong

Dikgetho tša dipopovers ka botee di ka laetšwa ka tsela ye nngwe ka tšhomišo ya dika tša datha, bjalo ka ge go hlalošitšwe ka godimo.

Go šomiša mošomo kapopperConfig 

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

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .

Mokgwa Tlhalošo
disable E tloša bokgoni bja gore popover ya elemente e bontšhwe. Popover e tla kgona go bontšhwa fela ge e kgontšhitšwe gape.
dispose Pata le go senya popover ya elemente (E tloša ya data ye e bolokilwego go elemente ya DOM). Popovers hore sebelisa kabo (tseo di bōptjoa sebelisa kgetho selector) ke ke ka bomong senya ka setloholo qholotsa elements.
enable E fa popover ya elemente bokgoni bja go bontšhwa. Popovers di kgontšhwa ka go ikemela.
getInstance Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa popover wo o amanago le elemente ya DOM.
getOrCreateInstance Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa popover wo o amanago le elemente ya DOM, goba go hlama ye mpsha ge go ka direga gore e be e sa thongwa.
hide Pata popover ya elemente. E boela go mogala pele ga ge popover e tloga e utilwe (ke gore pele ga ge hidden.bs.popovertiragalo e direga). Se se lebelelwa e le go hlohleletša “ka seatla” ga popover.
setContent E fa tsela ya go fetoša diteng tša popover ka morago ga go thoma ga yona.
show E utolla popover ya elemente. E boela go mogala pele ga ge popover e bontšhitšwe e le ka kgonthe (ke gore pele ga ge shown.bs.popovertiragalo e direga). Se se lebelelwa e le go hlohleletša “ka seatla” ga popover. Dipopo tšeo sehlogo sa tšona le diteng tša tšona ka bobedi e lego tša botelele bja lefela ga di ke di bontšhwa.
toggle Toggles popover ya elemente. E boela go mogala pele ga ge popover e tloga e bontšhitšwe goba e utilwe (ke gore pele ga ge tiragalo ya shown.bs.popovergoba hidden.bs.popovere direga). Se se lebelelwa e le go hlohleletša “ka seatla” ga popover.
toggleEnabled E fetola bokgoni bja gore popover ya elemente e bontšhwe goba e utilwe.
update E mpshafatša maemo a popover ya elemente. 
// 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'
})
Mokgwa setContento amogela objectngangišano, moo senotlelo se sengwe le se sengwe sa thepa e lego stringmokgethi wo o šomago ka gare ga thempleite ya popover, gomme boleng bjo bongwe le bjo bongwe bja thepa bjo bo amanago e ka ba string| element| function| null

Ditiragalo

Tiragalo Tlhalošo
hide.bs.popover Tiragalo ye e thuntšhwa ka pela ge hidemokgwa wa mohlala o biditšwe.
hidden.bs.popover Tiragalo ye e thuntšhwa ge popover e feditše go utollwa go modiriši (e tla emela gore diphetogo tša CSS di phethe).
inserted.bs.popover Tiragalo ye e thuntšhwa ka morago ga show.bs.popovertiragalo ge thempleite ya popover e okeditšwe go DOM.
show.bs.popover Tiragalo ye e thunya ka pela ge showmokgwa wa mohlala o bitšwa.
shown.bs.popover Tiragalo ye e thuntšhwa ge popover e dirilwe gore e bonagale go modiriši (e tla emela gore diphetogo tša CSS di phethe). 
const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})