Laktawan sa panguna nga sulud Laktaw sa docs navigation
Check
in English

Mga Popover

Dokumentasyon ug mga pananglitan sa pagdugang sa Bootstrap popovers, sama sa makita sa iOS, sa bisan unsang elemento sa imong site.

Niini nga panid

Overview

Mga butang nga mahibal-an kung gamiton ang popover plugin:

  • Ang mga Popover nagsalig sa ikatulo nga partido nga librarya nga Popper alang sa pagposisyon. Kinahanglan nimong iapil ang popper.min.js sa wala pa bootstrap.js, o gamita ang usa bootstrap.bundle.min.jsnga adunay Popper.
  • Ang mga Popover nanginahanglan sa popover plugin isip usa ka dependency.
  • Ang mga Popover kay nag-opt-in tungod sa mga rason sa performance, mao nga ikaw mismo ang mag-initialize niini .
  • Ang zero-length titleug contentmga kantidad dili gyud magpakita ug popover.
  • Tinoa container: 'body'aron malikayan ang mga problema sa paghubad sa mas komplikado nga mga sangkap (sama sa among mga grupo sa input, mga grupo sa butones, ug uban pa).
  • Ang pag-trigger sa mga popover sa tinago nga mga elemento dili molihok.
  • Ang mga popover para sa .disabledo disabledmga elemento kinahanglang ma-trigger sa usa ka elemento sa wrapper.
  • Kung na-trigger gikan sa mga angkla nga nagputos sa daghang mga linya, ang mga popover masentro taliwala sa kinatibuk-ang gilapdon sa mga angkla. Gamita .text-nowrapsa imong <a>s aron malikayan kini nga kinaiya.
  • Kinahanglang itago ang mga popover sa dili pa makuha ang mga katugbang nga elemento niini gikan sa DOM.
  • Ang mga popover mahimong ma-trigger salamat sa usa ka elemento sa sulod sa anino nga DOM.
Sa kasagaran, kini nga component naggamit sa built-in nga content sanitizer, nga nagtangtang sa bisan unsang HTML nga mga elemento nga dili klaro nga gitugutan. Tan-awa ang seksyon sa sanitizer sa among dokumentasyon sa JavaScript alang sa dugang nga mga detalye.
Ang epekto sa animation niini nga sangkap nagdepende sa prefers-reduced-motionpangutana sa media. Tan-awa ang gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .

Padayon sa pagbasa aron makita kung giunsa paglihok ang mga popover uban ang pipila ka mga pananglitan.

Mga pananglitan

I-enable ang mga popovers

Sama sa gihisgutan sa ibabaw, kinahanglan nimo nga magsugod sa mga popovers sa dili pa kini magamit. Usa ka paagi sa pagsugod sa tanan nga mga popovers sa usa ka panid mao ang pagpili kanila pinaagi sa ilang mga data-bs-togglehiyas, sama niini:

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

Live nga demo

Gigamit namo ang JavaScript nga susama sa snippet sa ibabaw aron ma-render ang mosunod nga live popover. Ang mga titulo gitakda pinaagi data-bs-titleug ang sulod sa lawas gitakda pinaagi sa data-bs-content.

Mobati nga gawasnon sa paggamit sa bisan hain titleo data-bs-titlesa imong HTML. Kung titlegigamit, awtomatik nga ilisan kini ni Popper data-bs-titlekung ang elemento gihatag.
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>

Upat ka direksyon

Upat ka mga opsyon ang anaa: ibabaw, tuo, ubos, ug wala. Ang mga direksyon gisalamin kung gigamit ang Bootstrap sa RTL. Itakda data-bs-placementaron usbon ang direksyon.

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>

Customcontainer

Kung ikaw adunay pipila ka mga estilo sa usa ka ginikanan nga elemento nga makabalda sa usa ka popover, gusto nimong itakda ang usa ka kostumbre containeraron ang HTML sa popover makita sa sulod sa elemento. Kasagaran kini sa mga responsive nga mga lamesa, mga grupo sa input, ug uban pa.

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

Ang laing sitwasyon diin gusto nimo nga magbutang ug klaro nga kostumbre containermao ang mga popovers sulod sa modal dialog , aron masiguro nga ang popover mismo gidugtong sa modal. Importante kini ilabina alang sa mga popover nga adunay interactive nga mga elemento – ang modal dialogs mobitik sa focus, mao nga gawas kon ang popover kay bata nga elemento sa modal, ang mga user dili maka-focus o maka-activate niining mga interactive nga elemento.

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

Pasadya nga mga popovers

Gidugang sa v5.2.0

Mahimo nimong ipasibo ang dagway sa mga popovers gamit ang CSS variables . Nagbutang kami usa ka naandan nga klase data-bs-custom-class="custom-popover"aron masakop ang among naandan nga hitsura ug gamiton kini aron ma-override ang pipila sa mga lokal nga variable sa 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>

Isalikway sa sunod nga pag-klik

Gamita ang focusgatilyo aron isalikway ang mga popover sa sunod nga pag-klik sa user sa laing elemento kay sa toggle nga elemento.

Piho nga markup gikinahanglan para sa dismiss-on-next-click

Alang sa husto nga cross-browser ug cross-platform nga pamatasan, kinahanglan nimo gamiton ang <a>tag, dili ang <button>tag, ug kinahanglan usab nimo nga ilakip ang usa ka tabindexhiyas.

Dili madawat nga popover
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'
})

Mga disabled nga elemento

Ang mga elemento nga adunay disabledattribute dili interactive, nagpasabot nga ang mga user dili maka-hover o maka-click niini aron ma-trigger ang popover (o tooltip). Isip usa ka workaround, gusto nimo nga ma-trigger ang popover gikan sa usa ka wrapper <div>o <span>, mas maayo nga gihimo nga keyboard-focusable gamit ang tabindex="0".

Para sa disabled nga popover triggers, mahimo usab nimo nga gusto data-bs-trigger="hover focus"nga ang popover makita ingon nga diha-diha nga biswal nga feedback sa imong mga tiggamit tungod kay sila dili magdahom nga mag- klik sa usa ka disabled nga elemento.

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

Mga variable

Gidugang sa v5.2.0

Isip kabahin sa nag-uswag nga CSS variables approach sa Bootstrap, ang mga popover karon naggamit sa lokal nga CSS variables .popoveralang sa gipaayo nga real-time nga pag-customize. Ang mga kantidad alang sa mga variable sa CSS gitakda pinaagi sa Sass, busa ang pag-customize sa Sass gisuportahan usab.

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

Sass variables

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

Paggamit

I-enable ang mga popovers pinaagi sa JavaScript:

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

Ang paghimo sa mga popover nga magamit alang sa mga tiggamit sa keyboard ug assistive nga teknolohiya

Aron tugotan ang mga tiggamit sa keyboard nga ma-aktibo ang imong mga popover, kinahanglan nimo nga idugang lamang kini sa mga elemento sa HTML nga tradisyonal nga gipunting sa keyboard ug interactive (sama sa mga link o mga kontrol sa porma). Bisan tuod ang arbitraryong HTML nga mga elemento (sama sa <span>s) mahimong mapunting pinaagi sa pagdugang sa tabindex="0"hiyas, kini makadugang sa posibleng makahasol ug makalibog nga mga paghunong sa tab sa dili interactive nga mga elemento alang sa mga tiggamit sa keyboard, ug kadaghanan sa mga teknolohiya sa pagtabang sa pagkakaron wala magpahibalo sa sulod sa popover niini nga sitwasyon. . Dugang pa, ayaw pagsalig lamang sa hoveringon nga gatilyo sa imong mga popovers, tungod kay kini maghimo kanila nga imposible nga ma-trigger alang sa mga tiggamit sa keyboard.

Samtang mahimo nimong i-insert ang adunahan, structured nga HTML sa mga popovers nga adunay htmlopsyon, kusganon namong girekomenda nga likayan nimo ang pagdugang og sobra nga gidaghanon sa sulod. Ang paagi nga naglihok karon ang mga popovers mao nga, sa higayon nga gipakita, ang ilang sulud nahigot sa elemento sa pag-trigger nga adunay aria-describedbyhiyas. Ingon usa ka sangputanan, ang tibuuk nga sulud sa popover ipahibalo sa mga tiggamit sa teknolohiya nga makatabang ingon usa ka taas, walay hunong nga sapa.

Dugang pa, samtang posible usab nga ilakip ang mga interactive nga kontrol (sama sa mga elemento sa porma o mga link) sa imong popover (pinaagi sa pagdugang niini nga mga elemento allowListsa gitugotan nga mga hiyas ug mga tag), hinumdomi nga sa pagkakaron ang popover wala magdumala sa han-ay sa focus sa keyboard. Sa diha nga ang usa ka tiggamit sa keyboard mag-abli sa usa ka popover, ang focus magpabilin sa triggering nga elemento, ug ingon nga ang popover kasagaran dili diha-diha dayon mosunod sa gatilyo sa dokumento sa istruktura, walay garantiya nga ang paglihok sa unahan/pagpindot.TABmobalhin sa usa ka tiggamit sa keyboard ngadto sa popover mismo. Sa laktod nga pagkasulti, ang pagdugang lamang sa mga interactive nga kontrol sa usa ka popover lagmit nga maghimo niini nga mga kontrol nga dili maabot/dili magamit alang sa mga tiggamit sa keyboard ug mga tiggamit sa mga teknolohiya sa pagtabang, o sa labing gamay nga paghimo alang sa usa ka dili makatarunganon nga kinatibuk-ang focus order. Sa kini nga mga kaso, ikonsiderar ang paggamit sa modal dialog sa baylo.

Mga kapilian

Ingon nga ang mga kapilian mahimong ipasa pinaagi sa data attributes o JavaScript, mahimo nimong idugang ang ngalan sa opsyon sa data-bs-, sama sa data-bs-animation="{value}". Siguruha nga usbon ang tipo sa kaso sa ngalan sa kapilian gikan sa " CamelCase " ngadto sa " kebab-case " kung ipasa ang mga kapilian pinaagi sa mga attribute sa datos. Pananglitan, gamita data-bs-custom-class="beautifier"imbes nga data-bs-customClass="beautifier".

Ingon sa Bootstrap 5.2.0, ang tanan nga mga sangkap nagsuporta sa usa ka eksperimento nga gireserba nga kinaiya sa datos data-bs-confignga mahimo’g ibutang ang yano nga pag-configure sa sangkap ingon usa ka string sa JSON. Kung ang usa ka elemento adunay data-bs-config='{"delay":0, "title":123}'ug data-bs-title="456"mga hiyas, ang katapusan titlenga kantidad mao ang 456ug ang bulag nga mga hiyas sa datos mag-override sa mga kantidad nga gihatag sa data-bs-config. Dugang pa, ang naglungtad nga mga hiyas sa datos makahimo sa pagbutang sa mga kantidad sa JSON sama sa data-bs-delay='{"show":0,"hide":150}'.

Timan-i nga alang sa mga rason sa seguridad ang sanitize, sanitizeFn, ug allowListmga opsyon dili mahatag gamit ang data attributes.
Ngalan Matang Default Deskripsyon
allowList butang Default nga bili Ang butang nga adunay gitugotan nga mga hiyas ug mga tag.
animation boolean true Ibutang ang CSS fade transition sa popover.
boundary string, elemento 'clippingParents' Ang utlanan sa pagpugong sa pag-awas sa popover (magamit lamang sa preventOverflow modifier sa Popper). Sa kasagaran, kini 'clippingParents'ug mahimong modawat ug HTMLElement reference (pinaagi sa JavaScript lamang). Alang sa dugang nga impormasyon tan-awa ang Popper's detectOverflow docs .
container hilo, elemento, bakak false Gidugang ang popover sa usa ka piho nga elemento. Pananglitan: container: 'body'. Kini nga opsyon labi ka mapuslanon tungod kay kini nagtugot kanimo sa pagpahimutang sa popover sa dagan sa dokumento duol sa nag-trigger nga elemento - nga makapugong sa popover gikan sa paglutaw gikan sa nag-trigger nga elemento sa panahon sa pag-usab sa gidak-on sa bintana.
content string, elemento, function '' Default nga kantidad sa sulod kung wala ang data-bs-contentattribute. Kung ang usa ka function gihatag, kini tawgon uban ang thisreference set sa elemento nga gilakip sa popover.
customClass string, function '' Idugang ang mga klase sa popover kung kini gipakita. Timan-i nga kini nga mga klase idugang dugang sa bisan unsang klase nga gitakda sa template. Para makadugang ug daghang klase, ibulag sila sa mga espasyo: 'class-1 class-2'. Mahimo usab nimo nga ipasa ang usa ka function nga kinahanglan ibalik ang usa ka string nga adunay dugang nga mga ngalan sa klase.
delay numero, butang 0 Paglangan sa pagpakita ug pagtago sa popover (ms)—dili magamit sa manual trigger type. Kung adunay gihatag nga numero, ang paglangan magamit sa parehas nga pagtago/pagpakita. Ang istruktura sa butang mao ang: delay: { "show": 500, "hide": 100 }.
fallbackPlacements hilo, laray ['top', 'right', 'bottom', 'left'] Ipasabot ang fallback placement pinaagi sa paghatag ug lista sa mga placement sa array (sumala sa gusto). Alang sa dugang nga impormasyon tan-awa ang Popper's behavior docs .
html boolean false Tugoti ang HTML sa popover. Kung tinuod, ang mga HTML nga tag sa popover's titlema-render sa popover. Kung bakak, innerTextgamiton ang propyedad sa pagsal-ot sa sulod sa DOM. Gamit ug text kung nabalaka ka bahin sa mga pag-atake sa XSS.
offset numero, hilo, function [0, 0] Offset sa popover kalabot sa target niini. Mahimo nimong ipasa ang usa ka hilo sa mga hiyas sa datos nga adunay mga kantidad nga gibulag sa comma sama sa: data-bs-offset="10,20". Kung ang usa ka function gigamit aron mahibal-an ang offset, kini gitawag nga adunay usa ka butang nga adunay sulud nga popper placement, ang reference, ug popper rects isip unang argumento niini. Ang triggering element nga DOM node gipasa isip ikaduhang argumento. Kinahanglang ibalik sa function ang array nga adunay duha ka numero: skidding , distance . Alang sa dugang nga impormasyon tan-awa ang Popper's offset docs .
placement string, function 'top' Giunsa pagpahimutang ang popover: awto, ibabaw, ubos, wala, tuo. Kung autogitino, kini dinamikong i-reorient ang popover. Kung gigamit ang usa ka function aron mahibal-an ang pagbutang, gitawag kini nga ang popover DOM node ingon ang una nga argumento ug ang hinungdan nga elemento nga DOM node ingon ikaduha. Ang thiskonteksto gitakda sa popover nga pananglitan.
popperConfig null, butang, function null Aron usbon ang default Popper config sa Bootstrap, tan-awa ang configuration sa Popper . Kung ang usa ka function gigamit sa paghimo sa Popper configuration, kini gitawag uban sa usa ka butang nga adunay sulod sa Bootstrap nga default Popper configuration. Makatabang kini kanimo sa paggamit ug paghiusa sa default sa imong kaugalingon nga configuration. Kinahanglang ibalik sa function ang usa ka butang sa pag-configure alang sa Popper.
sanitize boolean true I-enable o i-disable ang sanitization. Kung gi-aktibo 'template', 'content'ug 'title'ang mga kapilian ma-sanitize.
sanitizeFn null, function null Dinhi mahimo nimong ihatag ang imong kaugalingon nga sanitize function. Mahimong mapuslanon kini kung gusto nimo nga mogamit usa ka gipahinungod nga librarya aron mahimo ang sanitization.
selector string, bakak false Kung gihatag ang usa ka tigpili, ang mga butang nga popover itugyan sa gitakda nga mga target. Sa praktis, gigamit kini aron magamit usab ang mga popover sa dinamikong pagdugang sa mga elemento sa DOM ( jQuery.onsuporta). Tan-awa kini nga isyu ug usa ka pananglitan nga makapaayo .
template hilo '<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>' Base HTML nga gamiton sa paghimo sa popover. Ang popover's titlei-inject sa .popover-inner. .popover-arrowmahimong pana sa popover. Ang pinakagawas nga elemento sa wrapper kinahanglan adunay .popoverklase ug role="popover".
title string, elemento, function '' Default nga bili sa titulo kung wala ang titleattribute. Kung ang usa ka function gihatag, kini tawgon uban ang thisreference set sa elemento nga gilakip sa popover.
trigger hilo 'hover focus' Giunsa ma-trigger ang popover: click, hover, focus, manual. Mahimo nimong ipasa ang daghang mga trigger; ibulag sila sa usa ka luna. 'manual'nagpakita nga ang popover ma-trigger sa programmatically pinaagi sa .popover('show'), .popover('hide')ug .popover('toggle')mga pamaagi; kini nga bili dili mahimong ikombinar sa bisan unsa nga lain nga trigger. 'hover'sa iyang kaugalingon nga moresulta sa mga popovers nga dili ma-trigger pinaagi sa keyboard, ug kinahanglan lamang nga gamiton kung ang mga alternatibong pamaagi sa paghatud sa parehas nga kasayuran alang sa mga tiggamit sa keyboard naa.

Mga hiyas sa datos alang sa indibidwal nga mga popovers

Ang mga kapilian alang sa indibidwal nga mga popover mahimong ipiho pinaagi sa paggamit sa mga hiyas sa datos, ingon sa gipasabut sa ibabaw.

Paggamit sa function sapopperConfig 

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

Pamaagi

Asynchronous nga mga pamaagi ug transisyon

Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .

Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon .

Pamaagi Deskripsyon
disable Gitangtang ang abilidad nga ipakita ang popover sa usa ka elemento. Mapakita ra ang popover kung kini ma-enable pag-usab.
dispose Gitago ug giguba ang popover sa usa ka elemento (Gitangtang ang gitipigan nga datos sa elemento sa DOM). Ang mga popover nga naggamit sa delegasyon (nga gihimo gamit ang selectoropsyon ) dili mahimong tagsa-tagsa nga gub-on sa mga elemento sa descendant trigger.
enable Naghatag sa popover sa elemento sa abilidad nga ipakita. Ang mga popover gipalihok pinaagi sa default.
getInstance Static nga pamaagi nga nagtugot kanimo sa pagkuha sa popover nga pananglitan nga may kalabutan sa usa ka elemento sa DOM.
getOrCreateInstance Static nga pamaagi nga nagtugot kanimo sa pagkuha sa popover nga pananglitan nga may kalabutan sa usa ka elemento sa DOM, o paghimo og bag-o kung wala kini gisugdan.
hide Nagtago sa popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang popover tinuod nga gitago (ie sa wala pa hidden.bs.popovermahitabo ang panghitabo). Giisip kini nga usa ka "manwal" nga pag-trigger sa popover.
setContent Naghatag usa ka paagi aron mabag-o ang sulud sa popover pagkahuman sa pagsugod niini.
show Nagpadayag sa popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ipakita ang popover (ie sa wala pa shown.bs.popovermahitabo ang panghitabo). Giisip kini nga usa ka "manwal" nga pag-trigger sa popover. Ang mga Popover kansang titulo ug sulod parehas nga zero ang gitas-on dili ipakita.
toggle I-toggle ang popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang popover gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.popovero hidden.bs.popoverpanghitabo). Giisip kini nga usa ka "manwal" nga pag-trigger sa popover.
toggleEnabled I-toggle ang abilidad para sa usa ka elemento sa popover nga ipakita o itago.
update Gi-update ang posisyon sa popover sa usa ka elemento. 
// 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'
})
Ang setContentpamaagi modawat ug objectargumento, diin ang matag property-key kay balido nga stringtigpili sulod sa popover template, ug ang matag may kalabutan nga property-value mahimong string| element| function| null

Mga panghitabo

Panghitabo Deskripsyon
hide.bs.popover Kini nga panghitabo gipabuto dayon kung ang hidepamaagi sa pananglitan gitawag na.
hidden.bs.popover Kini nga panghitabo gipabuto kung ang popover nahuman na nga gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
inserted.bs.popover Kini nga panghitabo gipabuto pagkahuman sa show.bs.popoverpanghitabo kung ang template sa popover gidugang sa DOM.
show.bs.popover Kini nga panghitabo nagdilaab dayon kung ang showpamaagi sa pananglitan gitawag.
shown.bs.popover Kini nga panghitabo gipabuto kung ang popover nahimo nang makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). 
const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})