Laktawan sa panguna nga sulud Laktaw sa docs navigation
in English

Mga Popover

Dokumentasyon ug mga pananglitan alang 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 3rd party nga librarya nga Popper para sa pagpoposisyon. Kinahanglan nimong iapil ang popper.min.js sa wala pa ang bootstrap.js o gamiton bootstrap.bundle.min.js/ bootstrap.bundle.jsnga adunay sulud nga Popper aron molihok ang mga popover!
  • Ang mga Popover nanginahanglan sa tooltip plugin isip 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 gitugotan. 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.

Pananglitan: I-enable ang mga popovers bisan asa

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:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Pananglitan: Gamit ang containeropsyon

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.

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

Pananglitan

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" 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 kapilian ang magamit: taas, tuo, ubos, ug wala nga linya. Ang mga direksyon gisalamin kung gigamit ang Bootstrap sa RTL.

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

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 
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.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.

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

Sass

Mga variable

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$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;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Paggamit

I-enable ang mga popovers pinaagi sa JavaScript:

var exampleEl = document.getElementById('example')
var 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

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-bs-, sama sa data-bs-animation="". Siguruha nga usbon ang tipo sa kaso sa ngalan sa kapilian gikan sa camelCase hangtod sa kebab-case kung ipasa ang mga kapilian pinaagi sa mga hiyas sa datos. Pananglitan, imbes nga gamiton ang data-bs-customClass="beautifier", gamita ang data-bs-custom-class="beautifier".

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
animation boolean true Ibutang ang CSS fade transition sa popover
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 hilo | 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.
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 }
html boolean false Isulod ang HTML sa popover. Kung bakak, innerTextang propyedad gamiton sa pagsal-ot sa sulod sa DOM. Gamit ug text kung nabalaka ka bahin sa mga pag-atake sa XSS.
placement hilo | function 'right'

Giunsa pagpahimutang ang popover - awto | ibabaw | ubos | wala | husto.
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.
selector hilo | bakak false Kung gihatag ang usa ka tigpili, ang mga butang nga popover itugyan sa gitakda nga mga target. Sa praktis, kini gigamit aron makahimo sa dinamikong HTML nga sulod nga adunay mga popovers nga idugang. Tan-awa kini ug usa ka pananglitan nga impormatibo .
template hilo '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML nga gamiton sa paghimo sa popover.

Ang popover's titlei-inject sa .popover-header.

Ang popover's contenti-inject sa .popover-body.

.popover-arrowmahimong pana sa popover.

Ang labing gawas nga elemento sa wrapper kinahanglan adunay .popoverklase.
title hilo | 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 'click' Giunsa ang pag-trigger sa popover - pag-klik | hover | focus | manwal. Mahimo nimong ipasa ang daghang mga trigger; ibulag sila sa usa ka luna. manualdili mahimong ikombinar sa bisan unsa nga lain nga trigger.
fallbackPlacements han-ay ['top', 'right', 'bottom', 'left'] Ipasabot ang fallback nga mga placement pinaagi sa paghatag ug listahan sa mga placement sa array (sumala sa gusto). Alang sa dugang nga impormasyon tan-awa ang Popper's behavior docs
boundary hilo | 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 .
customClass hilo | 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.
sanitize boolean true I-enable o i-disable ang sanitization. Kung gi-aktibo 'template', 'content'ug 'title'ang mga kapilian malimpyohan. Tan-awa ang seksyon sa sanitizer sa among dokumentasyon sa JavaScript .
allowList butang Default nga bili Ang butang nga adunay gitugotan nga mga hiyas ug mga tag
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.
offset han-ay | hilo | function [0, 8]

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

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 gipatin-aw sa ibabaw.

Paggamit sa function sapopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var 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 .

ipakita

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-gitas-on dili gyud ipakita.

myPopover.show()

itago

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.

myPopover.hide()

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.

myPopover.toggle()

ilabay

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.

myPopover.dispose()

makahimo

Naghatag sa popover sa elemento sa abilidad nga ipakita. Ang mga popover gipalihok pinaagi sa default.

myPopover.enable()

disable

Gikuha ang abilidad nga ipakita ang popover sa usa ka elemento. Mapakita lang ang popover kung kini ma-enable pag-usab.

myPopover.disable()

toggleEnabled

I-toggle ang abilidad para sa usa ka elemento nga popover nga ipakita o itago.

myPopover.toggleEnabled()

update

Gi-update ang posisyon sa popover sa usa ka elemento.

myPopover.update()

getInstance

Static nga pamaagi nga nagtugot kanimo sa pagkuha sa popover nga pananglitan nga may kalabutan sa usa ka elemento sa DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

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.

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Mga panghitabo

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