Mga Popover

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

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 gamita ang 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.
Kung nagtukod ka sa among JavaScript gikan sa gigikanan, kinahanglan kiniutil.js .
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.

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

$(function () {
  $('[data-toggle="popover"]').popover()
})

Pananglitan: Gamit ang `container`opsyon

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.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Pananglitan

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-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.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-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-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  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 nimong i-trigger ang popover gikan sa usa ka wrapper <div>o <span>ug i-override ang pointer-eventson the disabled nga elemento.

Para sa disabled nga popover triggers, mahimo usab nimo nga gusto data-trigger="hover"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" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Paggamit

I-enable ang mga popovers pinaagi sa JavaScript:

$('#example').popover(options)

Ang pagpadali sa GPU

Ang mga popover usahay makita nga hanap Windows 10 mga aparato tungod sa pagpadali sa GPU ug usa ka giusab nga sistema sa DPI. Ang workaround alang niini sa v4 mao ang pag-disable sa GPU acceleration kung gikinahanglan sa imong mga popovers.

Gisugyot nga ayuhon:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

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 mga elemento sa HTML (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 sa whiteListo gitugotan nga mga hiyas ug mga tag), hibaloi 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-, sama sa data-animation="".

Timan-i nga alang sa mga hinungdan sa seguridad ang sanitize, sanitizeFnug whiteListmga kapilian dili mahatag gamit ang mga hiyas sa datos.

Ngalan	Matang	Default	Deskripsyon
animation	boolean	tinuod	Ibutang ang CSS fade transition sa popover
sudlanan	hilo \| elemento \| bakak	bakak	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.
sulod	hilo \| elemento \| function	''	Default nga kantidad sa sulod kung wala ang `data-content`attribute. Kung ang usa ka function gihatag, kini tawgon uban ang `this`reference set sa elemento nga gilakip sa popover.
paglangan	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	bakak	Isulod ang HTML sa popover. Kung bakak, ang pamaagi sa jQuery `text`gamiton sa pagsal-ot sa sulud sa DOM. Gamit ug text kung nabalaka ka bahin sa mga pag-atake sa XSS.
pagbutang	hilo \| function	'tama'	Giunsa pagpahimutang ang popover - awto \| ibabaw \| ubos \| wala \| husto. Kung `auto`gitino, 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 `this`konteksto gitakda sa popover nga pananglitan.
tigpili	hilo \| bakak	bakak	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="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	Base HTML nga gamiton sa paghimo sa popover. Ang popover's `title`i-inject sa `.popover-header`. Ang popover's `content`i-inject sa `.popover-body`. `.arrow`mahimong pana sa popover. Ang labing gawas nga elemento sa wrapper kinahanglan adunay `.popover`klase.
titulo	hilo \| elemento \| function	''	Default nga bili sa titulo kung wala ang `title`attribute. Kung ang usa ka function gihatag, kini tawgon uban ang `this`reference set sa elemento nga gilakip sa popover.
trigger	hilo	'pag-klik'	Giunsa ang pag-trigger sa popover - pag-klik \| hover \| focus \| manwal. Mahimo nimong ipasa ang daghang mga trigger; ibulag sila sa usa ka luna. `manual`dili mahimong ikombinar sa bisan unsa nga lain nga trigger.
offset	numero \| hilo	0	Offset sa popover kalabot sa target niini. Alang sa dugang nga impormasyon tan-awa ang Popper's offset docs .
fallbackPlacement	hilo \| han-ay	'flip'	Tugoti nga ipiho kung unsang posisyon ang gamiton ni Popper sa fallback. Alang sa dugang nga impormasyon tan-awa ang Popper's behavior 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: `'a b'`. Mahimo usab nimo nga ipasa ang usa ka function nga kinahanglan ibalik ang usa ka string nga adunay dugang nga mga ngalan sa klase.
utlanan	hilo \| elemento	'scrollParent'	Pag-awas sa pagpugong sa utlanan sa popover. Gidawat ang mga kantidad sa `'viewport'`, `'window'`, `'scrollParent'`, o usa ka HTMLElement reference (JavaScript lang). Alang sa dugang nga impormasyon tan-awa ang Popper's preventOverflow docs .
sanitize	boolean	tinuod	I-enable o i-disable ang sanitization. Kung gi-aktibo `'template'`, `'content'`ug `'title'`ang mga kapilian ma-sanitize. Tan-awa ang seksyon sa sanitizer sa among dokumentasyon sa JavaScript .
whitelist	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.
popperConfig	null \| butang	null	Aron usbon ang default Popper config sa Bootstrap, tan-awa ang configuration 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.

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 .

`$().popover(options)`

Nagsugod sa mga popover para sa koleksyon sa elemento.

`.popover('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-gitas-on dili gyud ipakita.

$('#element').popover('show')

`.popover('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.

$('#element').popover('hide')

`.popover('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.

$('#element').popover('toggle')

`.popover('dispose')`

Nagtago ug nagguba sa popover sa usa ka elemento. 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.

$('#element').popover('dispose')

`.popover('enable')`

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

$('#element').popover('enable')

`.popover('disable')`

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

$('#element').popover('disable')

`.popover('toggleEnabled')`

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

$('#element').popover('toggleEnabled')

`.popover('update')`

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

$('#element').popover('update')

Mga panghitabo

Uri sa Hitabo	Deskripsyon
show.bs.popover	Kini nga panghitabo nagdilaab dayon kung ang `show`pamaagi 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 `hide`pamaagi 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.popover`panghitabo kung ang template sa popover gidugang sa DOM.

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})