Source

Dagiti Popovers

Dokumentasion ken dagiti pagarigan para iti pananginayon kadagiti Bootstrap popovers, kas kadagidiay masarakan iti iOS, iti ania man nga elemento iti site-mo.

Panangkita iti pakabuklan

Dagiti banag nga ammuen no agusar ti popover plugin:

  • Agpannuray dagiti Popovers iti 3rd party library Popper.js para iti panagposision. Masapul nga iramanmo ti popper.min.js sakbay ti bootstrap.js wenno usarem ti bootstrap.bundle.min.js/ bootstrap.bundle.jsa naglaon iti Popper.js tapno agtrabaho dagiti popovers!
  • Dagiti Popovers ket agkasapulan ti tooltip plugin a kas maysa a panagpannuray.
  • No mangbangbangonka iti JavaScript-mi manipud iti gubuayan, kasapulanna tiutil.js .
  • Dagiti popovers ket opt-in para kadagiti rason ti panagaramid, isu a masapul nga irugim a mismo dagitoy .
  • Zero-length titleken contentvalues ​​ket pulos a di mangipakita iti popover.
  • Ibaga container: 'body'tapno maliklikan dagiti parikut ti panagiparang kadagiti ad-adu a komplikado a paset (kas dagiti grupo ti panagserrektayo, dagiti grupo ti buton, kdpy).
  • Saan nga agtrabaho ti panangtignay kadagiti popover kadagiti nailemmeng nga elemento.
  • Dagiti popovers para .disabledwenno disableddagiti elemento ket masapul a mai-trigger iti maysa nga elemento ti balkot.
  • No mai-trigger manipud kadagiti angkla a mangbalkot iti adu a linia, dagiti popover ket maisentro iti nagbaetan ti pakabuklan a kalawa dagiti angkla. Usaren white-space: nowrap;ti <a>s-mo tapno maliklikan daytoy a kababalin.
  • Masapul a mailemmeng dagiti popovers sakbay a maikkat dagiti katupagda nga elemento manipud iti DOM.

Itultuloymo ti agbasa tapno makitam no kasano nga agtrabaho dagiti popover babaen ti sumagmamano a pagarigan.

Pagarigan: Pagbalinen dagiti popovers iti sadinoman

Ti maysa a wagas a mangirugi kadagiti amin a popover iti maysa a panid ket isu koma ti panangpili kadagitoy babaen ti data-toggleattributeda:

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

Pagarigan: Panangusar iti containerpagpilian

No addaanka kadagiti sumagmamano nga estilo iti nagannak nga elemento a mangsinga iti popover, kayatmo nga ikeddeng ti maysa a kostumbre containertapno ti HTML ti popover ket agparang ketdi iti uneg dayta nga elemento.

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

Pagwadan

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

Uppat a direksion

Uppat a pagpilian ti magun-odan: ngato, kannawan, baba, ken kannigid a naitunos.

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

Dismiss iti sumaruno nga i-click

Usaren ti focusgatilio tapno mailaksid dagiti popover iti sumaganad a panagpidut ti agar-aramat iti sabali nga elemento ngem ti elemento ti panagbalbaliw.

Espesipiko a panagmarka ti kasapulan para iti dismiss-on-next-click

Para iti umno a kababalin ti krus-browser ken krus-plataporma, masapul nga usarem ti <a>etiketa, saan a ti <button>etiketa, ken masapul met nga iramanmo ti maysa a tabindexkababalin.

Mailaksid a 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'
})

Dagiti baldado nga elemento

Dagiti elemento nga addaan iti disabledattribute ket saan nga interaktibo, kayatna a sawen a dagiti agar-aramat ket dida mabalin ti ag-hover wenno ag-klik kadagitoy tapno mangtignay ti popover (wenno tooltip). Kas maysa a panagliklik, kayatmo a mangtignay ti popover manipud iti maysa a wrapper <div>wenno <span>ken i-override ti pointer-eventsiti baldado nga elemento.

Para kadagiti baldado a popover a mangtignay, mabalinmo pay a kaykayat data-trigger="hover"tapno ti popover ket agparang a kas ti dagus a biswal a sungbat kadagiti agar-aramatmo a kas mabalin a dida namnamaen a mangi -klik iti maysa a baldado 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>

Panagusar

Pagbalinen dagiti popover babaen ti JavaScript:

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

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-animation="".

Nagan Tipo Default Panangiladawan
animasion nga boolean nga agpayso Iyaplikar ti CSS fade transition iti popover
pagkargaan kuerdas nga | elemento nga | saan nga agpayso saan nga agpayso

Inayon ti popover iti espesipiko nga elemento. Kas pagarigan: container: 'body'. Daytoy a pagpilian ket nangruna a makatulong gapu ta daytoy ket mangipalubos kenka a mangiposision ti popover iti panagayus ti dokumento iti asideg ti mangtignay nga elemento - a manglapped ti popover manipud iti panagtaytayab nga adayo manipud iti mangtignay nga elemento bayat ti panagbalbaliw ti kadakkel ti tawa.
linaon kuerdas nga | elemento nga | amad '' .

Default a pateg ti linaon no data-contentawan ti attribute.

No ti maysa a panagandar ket naited, daytoy ket maawaganto nga addaan ti thisreperensiana a naikabil iti elemento a nakaikapet ti popover.
itantan numero | banag 0 nga

Ti panangitantan ti panangipakita ken panangilemmeng ti popover (ms) - saan nga agaplikar iti manual a kita ti trigger

No naited ti numero, maipakat ti delay agpadpada iti hide/show

Ti estruktura ti banag ket:delay: { "show": 500, "hide": 100 }
html nga boolean nga saan nga agpayso Ikabil ti HTML iti popover. No palso, ti textpamay-an ti jQuery ket mausarto a mangikabil ti linaon iti DOM. Usaren ti teksto no madanaganka kadagiti panangraut ti XSS.
pannakaikabil kuerdas nga | amad 'kusto'

Kasano nga iposision ti popover - auto | ngato | baba | kanigid | kusto.
No autonaikeddeng, dinamiko nga orientasionna manen ti popover.

No ti maysa a panagandar ket maus-usar a mangikeddeng ti pannakaikabil, daytoy ket maawagan nga addaan ti popover DOM a nodo a kas ti umuna nga argumentona ken ti mangtignay nga elemento a DOM a nodo a kas ti maikadua. Ti thiskonteksto ket naikeddeng iti popover instance.
agpili nga kuerdas nga | saan nga agpayso saan nga agpayso No ti maysa a mangpili ket naited, dagiti banag ti popover ket maitedto kadagiti naikeddeng a puntiria. Iti praktis, daytoy ket maus-usar tapno mapalubosan ti dinamiko a linaon ti HTML nga addaan kadagiti popover a nainayon. Kitaen daytoy ken ti makaisuro a pagarigan .
plantilia nga kuerdas '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base ti HTML nga usaren no mangpartuat ti popover.

Ti popover's titleket mai-inject iti .popover-header.

Ti popover's contentket mai-inject iti .popover-body.

.arrowagbalinto a pana ti popover.

Ti makinruar unay nga elemento ti balkot ket rumbeng nga addaan iti .popoverklase.
titulo kuerdas nga | elemento nga | amad '' .

Default a pateg ti paulo no titleawan ti attribute.

No ti maysa a panagandar ket naited, daytoy ket maawaganto nga addaan ti thisreperensiana a naikabil iti elemento a nakaikapet ti popover.
kalbiten kuerdas 'i-click'. Kasano a mai-trigger ti popover - i-click ti | ag-hover nga | pokus | giya. Mabalin a lumasatka iti adu a trigger; pagsinaen ida babaen ti maysa nga espasio. Ti `manual` ket saan a mabalin a maitipon iti ania man a sabali a trigger.
offset nga numero | kuerdas 0 nga Offset ti popover relatibo iti puntiriana. Para iti ad-adu pay nga impormasion kitaen dagiti offset docs ti Popper.js .
fallbackPanagplastar kuerdas nga | array nga 'ibaliktad' Palubosan nga ikeddeng no ania a posision ti usaren ni Popper iti fallback. Para iti ad-adu pay nga impormasion kitaen dagiti dok ti kababalin ti Popper.js
beddeng ti pagbeddengan kuerdas nga | elemento 'ag-scrollParent'. Overflow constraint beddeng ti popover. Awaten dagiti pateg ti 'viewport', 'window', 'scrollParent', wenno ti reperensia ti HTMLElement (JavaScript laeng). Para iti ad-adu pay nga impormasion kitaen ti preventOverflow docs ti Popper.js .

Dagiti attribute ti datos para kadagiti indibidual a popovers

Dagiti pagpilian para kadagiti indibidual a popover ket mabalin nga alternatibo a maikeddeng babaen ti panagusar kadagiti kababalin ti datos, a kas naipalawag iti ngato.

Dagiti Pamay-an

Dagiti asynchronous a pamay-an ken panagbalbaliw

Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .

Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion.

$().popover(options)

Mangrugi kadagiti popovers para iti maysa a koleksion ti elemento.

.popover('show')

Ipalgakna ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita ti popover (kayatna a sawen sakbay a shown.bs.popovermapasamak ti pasamak). Maibilang daytoy a “manual” a panangtignay iti popover. Dagiti popover nga agpada a zero-length ti paulo ken linaonda ket saan a pulos a maiparang.

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

.popover('hide')

Ilemmengna ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti popover (kayatna a sawen sakbay a hidden.bs.popovermapasamak ti pasamak). Maibilang daytoy a “manual” a panangtignay iti popover.

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

.popover('toggle')

I-toggles ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita wenno nailemmeng ti popover (kayatna a sawen sakbay a mapasamak ti shown.bs.popoverwenno hidden.bs.popoverpasamak). Maibilang daytoy a “manual” a panangtignay iti popover.

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

.popover('dispose')

Ilemmeng ken dadaelenna ti popover ti maysa nga elemento. Dagiti popover nga agus-usar ti delegasion (a naparsua babaen ti panagusar ti selectorpagpilian ) ket saan a mabalin a saggaysa a madadael kadagiti kaputotan a mangtignay nga elemento.

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

.popover('enable')

Mangted ti popover ti maysa nga elemento ti abilidad a maipakita. Dagiti popover ket napalubosan babaen ti default.

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

.popover('disable')

Ikkaten ti abilidad para iti popover ti maysa nga elemento a maipakita. Mabalin laeng a maipakita ti popover no ma-enable manen.

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

.popover('toggleEnabled')

I-toggles ti abilidad para iti popover ti maysa nga elemento a maipakita wenno mailemmeng.

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

.popover('update')

Ipabaro ti posision ti popover ti maysa nga elemento.

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

Dagiti Pasamak

Kita ti Pasamak Panangiladawan
ipakita.bs.popover Daytoy a pasamak ket agputok a dagus no ti showpamay-an ti pagarigan ket maawagan.
naipakita.bs.popover Daytoy a pasamak ket mapaputok no ti popover ket naaramiden a makita ti agar-aramat (urayennanto dagiti panagbalbaliw ti CSS a malpas).
ilemmeng.bs.popover Daytoy a pasamak ket dagus a mapaputok no ti hidepamay-an ti pagarigan ket naawagan.
nailemmeng.bs.napanglaw Daytoy a pasamak ket mapaputok no ti popover ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas).
naikabil.bs.popover Daytoy a pasamak ket mapaputok kalpasan ti show.bs.popoverpasamak no ti plantilia ti popover ket nainayon iti DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})