Source

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 Popovers nagsalig sa 3rd party library nga Popper.js 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 Popper.js 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 white-space: nowrap;sa 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.

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

$(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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  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)

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

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

Kung ang usa ka function gihatag, kini tawgon uban ang thisreference 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 textgamiton 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 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.
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 titlei-inject sa .popover-header.

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

.arrowmahimong pana sa popover.

Ang labing gawas nga elemento sa wrapper kinahanglan adunay .popoverklase.
titulo 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 '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. Ang `manwal` dili mahimong ikombinar sa bisan unsang laing gatilyo.
offset numero | hilo 0 Offset sa popover kalabot sa target niini. Alang sa dugang nga impormasyon tan-awa ang Popper.js's offset docs .
fallbackPlacement hilo | han-ay 'flip' Tugoti nga ipiho kung unsang posisyon ang gamiton ni Popper sa fallback. Para sa dugang nga impormasyon tan-awa ang Popper.js's behavior docs
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.js's preventOverflow docs .

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.

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 kay zero-gitas-on dili gayud 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')

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

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

.popover('toggleEnabled')

I-toggle ang abilidad para sa usa ka elemento sa 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 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 nga makompleto ang mga transisyon sa CSS).
gisulod.bs.popover Kini nga panghitabo gipabuto pagkahuman sa show.bs.popoverpanghitabo kung ang template sa popover gidugang sa DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})