Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
Check
in English

Mga Popover

Dokumentasyon at mga halimbawa para sa pagdaragdag ng Bootstrap popovers, tulad ng mga matatagpuan sa iOS, sa anumang elemento sa iyong site.

Sa pahinang ito

Pangkalahatang-ideya

Mga bagay na dapat malaman kapag ginagamit ang popover plugin:

  • Umaasa ang mga Popover sa third party na library na Popper para sa pagpoposisyon. Dapat mong isama ang popper.min.js bago bootstrap.js, o gumamit ng isa bootstrap.bundle.min.jsna naglalaman ng Popper.
  • Ang mga popover ay nangangailangan ng popover plugin bilang isang dependency.
  • Ang mga popover ay nag-opt-in para sa mga dahilan ng pagganap, kaya dapat mong simulan ang mga ito sa iyong sarili .
  • Hindi kailanman magpapakita ng popover ang zero-length titleat mga value.content
  • Tukuyin container: 'body'upang maiwasan ang pag-render ng mga problema sa mas kumplikadong mga bahagi (tulad ng aming mga pangkat ng input, mga pangkat ng button, atbp).
  • Ang pag-trigger ng mga popover sa mga nakatagong elemento ay hindi gagana.
  • Dapat na ma-trigger ang mga popover para sa .disabledo mga disabledelemento sa isang elemento ng wrapper.
  • Kapag na-trigger mula sa mga anchor na bumabalot sa maraming linya, ang mga popover ay igitna sa pagitan ng kabuuang lapad ng mga anchor. Gamitin .text-nowrapsa iyong <a>s upang maiwasan ang pag-uugaling ito.
  • Dapat na itago ang mga popover bago maalis ang mga kaukulang elemento nito sa DOM.
  • Maaaring ma-trigger ang mga popover salamat sa isang elemento sa loob ng shadow DOM.
Bilang default, ginagamit ng component na ito ang built-in na content sanitizer, na nag-aalis ng anumang elemento ng HTML na hindi tahasang pinapayagan. Tingnan ang seksyon ng sanitizer sa aming dokumentasyon ng JavaScript para sa higit pang mga detalye.
Ang epekto ng animation ng bahaging ito ay nakasalalay sa prefers-reduced-motionquery ng media. Tingnan ang seksyon ng pinababang paggalaw ng aming dokumentasyon ng pagiging naa-access .

Panatilihin ang pagbabasa upang makita kung paano gumagana ang mga popover kasama ang ilang mga halimbawa.

Mga halimbawa

Paganahin ang mga popover

Gaya ng nabanggit sa itaas, dapat mong simulan ang mga popover bago sila magamit. Ang isang paraan upang simulan ang lahat ng mga popover sa isang pahina ay ang piliin ang mga ito ayon sa kanilang data-bs-togglekatangian, tulad nito:

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

Live na demo

Gumagamit kami ng JavaScript na katulad ng snippet sa itaas upang i-render ang sumusunod na live na popover. Ang mga pamagat ay itinakda sa pamamagitan ng data-bs-titleat ang nilalaman ng katawan ay itinakda sa pamamagitan ng data-bs-content.

Huwag mag-atubiling gamitin ang alinman titleo data-bs-titlesa iyong HTML. Kapag titleginamit, awtomatikong papalitan ito ng Popper data-bs-titlekapag nai-render ang elemento.
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>

Apat na direksyon

Apat na opsyon ang magagamit: itaas, kanan, ibaba, at kaliwa. Ang mga direksyon ay sinasalamin kapag gumagamit ng Bootstrap sa RTL. Itakda data-bs-placementupang baguhin 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

Kapag mayroon kang ilang mga istilo sa isang parent na elemento na nakakasagabal sa isang popover, gugustuhin mong tumukoy ng custom containerupang ang HTML ng popover ay lumabas na lang sa loob ng elementong iyon. Karaniwan ito sa mga tumutugon na talahanayan, mga pangkat ng pag-input, at mga katulad nito.

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

Ang isa pang sitwasyon kung saan gugustuhin mong magtakda ng tahasang custom containeray ang mga popover sa loob ng modal dialog , upang matiyak na ang popover mismo ay nakadugtong sa modal. Ito ay partikular na mahalaga para sa mga popover na naglalaman ng mga interactive na elemento – ang mga modal dialog ay bitag ang focus, kaya maliban kung ang popover ay isang child element ng modal, ang mga user ay hindi makakapag-focus o makakapag-activate sa mga interactive na elementong ito.

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

Mga custom na popover

Idinagdag sa v5.2.0

Maaari mong i-customize ang hitsura ng mga popover gamit ang mga variable ng CSS . Nagtakda kami ng custom na klase data-bs-custom-class="custom-popover"upang saklawin ang aming custom na hitsura at gamitin ito para i-override ang ilan sa mga lokal na variable ng 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>

I-dismiss sa susunod na pag-click

Gamitin ang focustrigger upang i-dismiss ang mga popover sa susunod na pag-click ng user sa ibang elemento kaysa sa toggle na elemento.

Kinakailangan ang partikular na markup para sa dismiss-on-next-click

Para sa wastong cross-browser at cross-platform na pag-uugali, dapat mong gamitin ang <a>tag, hindi ang <button>tag, at dapat ka ring magsama ng tabindexattribute.

Na-dismiss na 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 elementong may kapansanan

Ang mga elementong may disabledattribute ay hindi interactive, ibig sabihin, hindi maaaring i-hover o i-click ng mga user ang mga ito upang mag-trigger ng popover (o tooltip). Bilang isang solusyon, gugustuhin mong i-trigger ang popover mula sa isang wrapper <div>o <span>, perpektong ginawang keyboard-focusable gamit ang tabindex="0".

Para sa mga na-disable na pag-trigger ng popover, maaari mo ring mas gusto data-bs-trigger="hover focus"na ang popover ay lumitaw bilang agarang visual na feedback sa iyong mga user dahil maaaring hindi nila inaasahan na mag- click sa isang hindi pinaganang 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

Idinagdag sa v5.2.0

Bilang bahagi ng umuusbong na mga variable ng CSS ng Bootstrap, ginagamit na ngayon ng mga popover ang mga lokal na variable ng CSS .popoverpara sa pinahusay na real-time na pag-customize. Ang mga halaga para sa mga variable ng CSS ay itinakda sa pamamagitan ng Sass, kaya sinusuportahan pa rin ang pag-customize ng Sass.

  --#{$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 variable

$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

Paganahin ang mga popover sa pamamagitan ng JavaScript:

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

Ang paggawa ng mga popover ay gumagana para sa mga gumagamit ng keyboard at pantulong na teknolohiya

Upang payagan ang mga user ng keyboard na i-activate ang iyong mga popover, dapat mo lang silang idagdag sa mga elemento ng HTML na tradisyonal na nakatutok sa keyboard at interactive (tulad ng mga link o mga kontrol sa form). Bagama't ang mga di-makatwirang elemento ng HTML (tulad ng <span>s) ay maaaring gawing focusable sa pamamagitan ng pagdaragdag ng tabindex="0"attribute, magdaragdag ito ng potensyal na nakakainis at nakakalito na mga tab stop sa mga hindi interactive na elemento para sa mga user ng keyboard, at karamihan sa mga pantulong na teknolohiya ay kasalukuyang hindi nag-aanunsyo ng nilalaman ng popover sa sitwasyong ito. . Bukod pa rito, huwag umasa lamang hoverbilang trigger para sa iyong mga popover, dahil gagawin nitong imposibleng ma-trigger ang mga ito para sa mga user ng keyboard.

Bagama't maaari kang magpasok ng mayaman, structured na HTML sa mga popover na may htmlopsyon, lubos naming inirerekomenda na iwasan mo ang pagdaragdag ng labis na dami ng nilalaman. Ang paraan ng kasalukuyang paggana ng mga popover ay, kapag naipakita na, ang kanilang nilalaman ay nakatali sa elemento ng pag-trigger na may aria-describedbykatangian. Bilang resulta, ang kabuuan ng nilalaman ng popover ay iaanunsyo sa mga gumagamit ng pantulong na teknolohiya bilang isang mahaba, walang patid na stream.

Bukod pa rito, habang posible ring isama ang mga interactive na kontrol (gaya ng mga elemento ng form o link) sa iyong popover (sa pamamagitan ng pagdaragdag ng mga elementong ito sa mga allowListpinapayagang attribute at tag), tandaan na sa kasalukuyan ang popover ay hindi namamahala sa keyboard focus order. Kapag ang isang gumagamit ng keyboard ay nagbukas ng isang popover, ang focus ay nananatili sa nagti-trigger na elemento, at dahil ang popover ay karaniwang hindi kaagad sumusunod sa trigger sa istraktura ng dokumento, walang garantiya na ang paglipat ng pasulong/pagpindotTABililipat ang isang gumagamit ng keyboard sa mismong popover. Sa madaling salita, ang pagdaragdag lamang ng mga interactive na kontrol sa isang popover ay malamang na gawing hindi maabot/hindi magagamit ang mga kontrol na ito para sa mga gumagamit ng keyboard at mga gumagamit ng mga pantulong na teknolohiya, o sa pinakakaunti ay gumawa para sa isang hindi makatwirang pangkalahatang pagkakasunud-sunod ng focus. Sa mga kasong ito, isaalang-alang ang paggamit ng modal dialog sa halip.

Mga pagpipilian

Dahil maaaring maipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript, maaari kang magdagdag ng pangalan ng opsyon sa data-bs-, tulad ng sa data-bs-animation="{value}". Siguraduhing baguhin ang uri ng case ng pangalan ng opsyon mula sa " camelCase " sa " kebab-case " kapag ipinapasa ang mga opsyon sa pamamagitan ng mga katangian ng data. Halimbawa, gamitin data-bs-custom-class="beautifier"sa halip na data-bs-customClass="beautifier".

Mula sa Bootstrap 5.2.0, sinusuportahan ng lahat ng mga bahagi ang isang pang- eksperimentong nakalaan na katangian ng data data-bs-configna maaaring maglagay ng simpleng configuration ng bahagi bilang isang string ng JSON. Kapag ang isang elemento ay may data-bs-config='{"delay":0, "title":123}'at data-bs-title="456"mga katangian, ang huling titlehalaga ay magiging 456at ang hiwalay na mga katangian ng data ay mag-o-override sa mga halagang ibinigay sa data-bs-config. Bilang karagdagan, ang mga kasalukuyang katangian ng data ay nakakapaglagay ng mga halaga ng JSON tulad ng data-bs-delay='{"show":0,"hide":150}'.

Tandaan na para sa mga kadahilanang pangseguridad ang sanitize, sanitizeFn, at mga allowListopsyon ay hindi maibibigay gamit ang mga katangian ng data.
Pangalan Uri Default Paglalarawan
allowList bagay Default na halaga Bagay na naglalaman ng mga pinapayagang katangian at tag.
animation boolean true Maglapat ng CSS fade transition sa popover.
boundary string, elemento 'clippingParents' Overflow constraint boundary ng popover (nalalapat lang sa preventOverflow modifier ng Popper). Bilang default, ito 'clippingParents'ay at maaaring tumanggap ng isang HTMLElement reference (sa pamamagitan ng JavaScript lamang). Para sa higit pang impormasyon sumangguni sa detectOverflow docs ng Popper .
container string, elemento, mali false Idinaragdag ang popover sa isang partikular na elemento. Halimbawa: container: 'body'. Ang pagpipiliang ito ay partikular na kapaki-pakinabang dahil pinapayagan ka nitong iposisyon ang popover sa daloy ng dokumento malapit sa nagti-trigger na elemento - na pipigil sa popover na lumutang palayo sa nag-trigger na elemento sa panahon ng pagbabago ng laki ng window.
content string, elemento, function '' Default na halaga ng nilalaman kung data-bs-contentwalang katangian. Kung ang isang function ay ibinigay, ito ay tatawagin kasama ang thisreference na nakatakda sa elemento kung saan ang popover ay naka-attach sa.
customClass string, function '' Magdagdag ng mga klase sa popover kapag ipinakita ito. Tandaan na ang mga klase na ito ay idaragdag bilang karagdagan sa anumang mga klase na tinukoy sa template. Upang magdagdag ng maraming klase, paghiwalayin ang mga ito ng mga puwang: 'class-1 class-2'. Maaari ka ring magpasa ng isang function na dapat magbalik ng isang string na naglalaman ng mga karagdagang pangalan ng klase.
delay numero, bagay 0 Pagkaantala sa pagpapakita at pagtatago ng popover (ms)—ay hindi nalalapat sa manu-manong uri ng pag-trigger. Kung may ibinigay na numero, ilalapat ang pagkaantala sa parehong itago/ipakita. Ang istraktura ng bagay ay: delay: { "show": 500, "hide": 100 }.
fallbackPlacements string, hanay ['top', 'right', 'bottom', 'left'] Tukuyin ang mga fallback na placement sa pamamagitan ng pagbibigay ng listahan ng mga placement sa array (ayon sa kagustuhan). Para sa higit pang impormasyon sumangguni sa mga doc ng pag-uugali ng Popper .
html boolean false Payagan ang HTML sa popover. Kung totoo, ang mga HTML na tag sa popover titleay ire-render sa popover. Kung false, innerTextgagamitin ang property para magpasok ng content sa DOM. Gumamit ng text kung nag-aalala ka tungkol sa mga pag-atake ng XSS.
offset numero, string, function [0, 0] Offset ng popover na nauugnay sa target nito. Maaari kang magpasa ng string sa mga katangian ng data na may mga halagang pinaghihiwalay ng kuwit tulad ng: data-bs-offset="10,20". Kapag ang isang function ay ginamit upang matukoy ang offset, ito ay tinatawag na may isang bagay na naglalaman ng popper placement, ang reference, at popper rects bilang ang unang argumento nito. Ang triggering element na DOM node ay ipinasa bilang pangalawang argumento. Ang function ay dapat magbalik ng array na may dalawang numero: skidding , distance . Para sa higit pang impormasyon sumangguni sa mga offset na doc ng Popper .
placement string, function 'top' Paano iposisyon ang popover: auto, itaas, ibaba, kaliwa, kanan. Kapag autotinukoy, dynamic nitong i-reorient ang popover. Kapag ginamit ang isang function upang matukoy ang placement, tinatawag itong popover DOM node bilang unang argumento nito at ang triggering element na DOM node bilang pangalawa nito. Ang thiskonteksto ay nakatakda sa halimbawa ng popover.
popperConfig null, object, function null Upang baguhin ang default na Popper config ng Bootstrap, tingnan ang configuration ng Popper . Kapag ang isang function ay ginamit upang lumikha ng Popper configuration, ito ay tinatawag na may isang object na naglalaman ng default na Popper configuration ng Bootstrap. Tinutulungan ka nitong gamitin at pagsamahin ang default sa sarili mong configuration. Ang function ay dapat magbalik ng configuration object para sa Popper.
sanitize boolean true Paganahin o huwag paganahin ang sanitization. Kung na-activate 'template', 'content'at 'title'ang mga opsyon ay ma-sanitize.
sanitizeFn null, function null Dito maaari kang magbigay ng iyong sariling sanitize function. Maaari itong maging kapaki-pakinabang kung mas gusto mong gumamit ng nakalaang library para magsagawa ng sanitization.
selector string, mali false Kung may ibibigay na selector, ang mga popover object ay idelegado sa mga tinukoy na target. Sa pagsasagawa, ito ay ginagamit upang ilapat din ang mga popover sa dynamic na idinagdag na mga elemento ng DOM ( jQuery.onsuporta). Tingnan ang isyung ito at isang halimbawang nagbibigay-kaalaman .
template string '<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>' Base HTML na gagamitin kapag gumagawa ng popover. Ang popover's titleay iturok sa .popover-inner. .popover-arroway magiging arrow ng popover. Ang pinakamalawak na elemento ng wrapper ay dapat magkaroon ng .popoverklase at role="popover".
title string, elemento, function '' Default na halaga ng pamagat kung titlewalang katangian. Kung ang isang function ay ibinigay, ito ay tatawagin kasama ang thisreference na nakatakda sa elemento kung saan ang popover ay naka-attach sa.
trigger string 'hover focus' Paano na-trigger ang popover: click, hover, focus, manual. Maaari kang magpasa ng maraming trigger; paghiwalayin sila ng isang puwang. 'manual'ay nagpapahiwatig na ang popover ay ma-trigger sa pamamagitan ng programmatically sa pamamagitan ng .popover('show'), .popover('hide')at mga .popover('toggle')pamamaraan; hindi maaaring isama ang halagang ito sa anumang iba pang trigger. 'hover'sa sarili nitong magreresulta sa mga popover na hindi ma-trigger sa pamamagitan ng keyboard, at dapat lang gamitin kung may mga alternatibong pamamaraan para sa paghahatid ng parehong impormasyon para sa mga user ng keyboard.

Mga katangian ng data para sa mga indibidwal na popover

Ang mga opsyon para sa mga indibidwal na popover ay maaaring tukuyin sa pamamagitan ng paggamit ng mga katangian ng data, gaya ng ipinaliwanag sa itaas.

Paggamit ng function na maypopperConfig 

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

Paraan

Mga asynchronous na pamamaraan at paglipat

Ang lahat ng mga pamamaraan ng API ay asynchronous at nagsisimula ng isang paglipat . Bumalik sila sa tumatawag sa sandaling magsimula ang paglipat ngunit bago ito matapos . Bilang karagdagan, babalewalain ang isang method call sa isang transitioning component .

Tingnan ang aming dokumentasyon ng JavaScript para sa higit pang impormasyon .

Pamamaraan Paglalarawan
disable Tinatanggal ang kakayahang maipakita ang popover ng isang elemento. Maipapakita lang ang popover kung ito ay muling pinagana.
dispose Itinatago at sinisira ang popover ng isang elemento (Tinatanggal ang nakaimbak na data sa elemento ng DOM). Ang mga popover na gumagamit ng delegasyon (na ginawa gamit ang selectoropsyon ) ay hindi maaaring isa-isang sirain sa mga elemento ng descendant na trigger.
enable Nagbibigay ng kakayahang maipakita ang popover ng isang elemento. Ang mga popover ay pinagana bilang default.
getInstance Static na paraan na nagbibigay-daan sa iyong makuha ang popover instance na nauugnay sa isang elemento ng DOM.
getOrCreateInstance Static na paraan na nagbibigay-daan sa iyong makuha ang popover instance na nauugnay sa isang elemento ng DOM, o lumikha ng bago kung sakaling hindi ito nasimulan.
hide Itinatago ang popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naitago ang popover (ibig sabihin, bago hidden.bs.popovermangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover.
setContent Nagbibigay ng paraan upang baguhin ang nilalaman ng popover pagkatapos ng pagsisimula nito.
show Nagpapakita ng popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang popover (ibig sabihin, bago shown.bs.popovermangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover. Ang mga popover na ang pamagat at nilalaman ay parehong zero-length ay hindi kailanman ipinapakita.
toggle I-toggle ang popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita o naitago ang popover (ibig sabihin, bago mangyari ang shown.bs.popovero hidden.bs.popoverkaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover.
toggleEnabled I-toggle ang kakayahang ipakita o itago ang popover ng isang elemento.
update Ina-update ang posisyon ng popover ng isang 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 setContentpamamaraan ay tumatanggap objectng argumento, kung saan ang bawat property-key ay isang wastong stringtagapili sa loob ng popover template, at ang bawat nauugnay na property-value ay maaaring string| element| function| null

Mga kaganapan

Kaganapan Paglalarawan
hide.bs.popover Agad na pinapagana ang kaganapang ito kapag hidetinawag na ang paraan ng instance.
hidden.bs.popover Ang kaganapang ito ay pinapagana kapag ang popover ay tapos nang itago mula sa user (maghihintay para sa mga transition ng CSS upang makumpleto).
inserted.bs.popover Ang kaganapang ito ay pinapagana pagkatapos ng show.bs.popoverkaganapan kapag ang template ng popover ay naidagdag sa DOM.
show.bs.popover Agad na gagana ang kaganapang ito kapag showtinawag ang paraan ng instance.
shown.bs.popover Ang kaganapang ito ay pinapagana kapag ang popover ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS). 
const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})