Source

Popovers eziyitibwa Popovers

Ebiwandiiko n’ebyokulabirako eby’okugattako Bootstrap popovers, nga ezo ezisangibwa mu iOS, ku elementi yonna ku mukutu gwo.

Okulaba okutwalira awamu

Ebintu by’olina okumanya ng’okozesa popover plugin:

  • Popovers yeesigamye ku tterekero ly'ebitabo ery'ekibiina eky'okusatu Popper.js okusobola okuteeka mu kifo. Olina okussaamu popper.min.js nga tonnaba bootstrap.js oba kozesa bootstrap.bundle.min.js/ bootstrap.bundle.jserimu Popper.js okusobola popovers okukola!
  • Popovers zeetaaga plugin ya tooltip nga okwesigamizibwa.
  • Bw'oba ozimba JavaScript yaffe okuva ku nsibuko, kyetaagisautil.js .
  • Popovers are opt-in for performance reasons, kale olina okuzitandika ggwe kennyini .
  • Zero-length titlene contentvalues ​​tezijja kulaga popover.
  • Laga container: 'body'okwewala ebizibu by'okulaga mu bitundu ebizibu ennyo (nga ebibinja byaffe eby'okuyingiza, ebibinja bya button, n'ebirala).
  • Okusitula popovers ku elements ezikwekebwa tekijja kukola.
  • Popovers for .disabledoba disabledelements zirina okutandikibwa ku elementi y'okuzinga.
  • Bwe zisitulwa okuva ku nnanga ezizinga ku layini eziwera, popovers zijja kuba wakati wakati w’obugazi bw’ennanga okutwalira awamu. Kozesa .text-nowrapku <a>s yo okwewala enneeyisa eno.
  • Popovers zirina okukwekebwa nga elements zazo ezikwatagana tezinnaggyibwa mu DOM.

Sigala ng’osoma olabe engeri popovers gye zikolamu n’ebyokulabirako ebimu.

Okugeza: Ssobozesa popovers buli wamu

Engeri emu ey'okutandikawo popovers zonna ku lupapula yandibadde okuzilonda okusinziira ku data-toggleattribute yazo:

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

Okugeza: Okukozesa containereky’okulonda

Bw'oba n'emisono egimu ku elementi omuzadde ezitaataaganya popover, ojja kwagala okulaga custom containerHTML ya popover esobole okulabika munda mu elementi eyo mu kifo ky'ekyo.

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

Eky'okulabirako

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

Endagiriro nnya

Enkola nnya ziriwo: waggulu, ku ddyo, wansi, ne kkono nga zikwatagana.

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

Goba ku click okuddako

Kozesa focusekiziyiza okugoba popovers ku kunyiga kw'omukozesa okuddako ku elementi ey'enjawulo okusinga toggle element.

Markup eyenjawulo yeetaagibwa ku kugobwa-ku-ku-ku-ku-dako-okunyiga

Okusobola enneeyisa entuufu eya cross-browser ne cross-platform, olina okukozesa <a>tag, so si tag <button>, era era olina okussaamu tabindexattribute.

Poover egobeddwa 
<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'
})

Ebintu ebilema

Elements ezirina disabledattribute tezikwatagana, ekitegeeza nti abakozesa tebasobola hover oba okuzinyiga okutandika popover (oba tooltip). Nga workaround, ojja kwagala okutandika popover okuva mu wrapper <div>oba <span>era override the pointer-eventsku disabled element.

Ku biziyiza popover ebilema, oyinza data-trigger="hover"n’okwagala popover esobole okulabika ng’okuddamu okw’amangu eri abakozesa bo nga bwe bayinza obutasuubira kunyiga ku kintu ekilema.

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

Enkozesa

Ssobozesa popovers nga oyita mu JavaScript:

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

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-, nga mu data-animation="".

Erinnya Okuwandiika Okukosamu Okunnyonnyola
okukola ebifaananyi ebirina obulamu boolean kituufu Kozesa enkyukakyuka ya CSS fade ku popover
ekintu ekirimu ebintu olunyiriri | elementi | -kyaamu -kyaamu

Agattako popover ku elementi eyeetongodde. Okugeza: container: 'body'. Enkola eno ya mugaso nnyo mu ngeri nti ekusobozesa okuteeka popover mu kutambula kw'ekiwandiiko okumpi n'ekintu ekiziyiza - ekijja okulemesa popover okulengejja okuva ku kintu ekiziyiza mu kiseera ky'okukyusa obunene bw'eddirisa.
okwesiima olunyiriri | elementi | enkola '' .

Omuwendo gw'ebirimu ogusookerwako singa data-contentekintu tekibaawo.

Singa omulimu guweebwa, gujja kuyitibwa nga thisreference yaayo eteekeddwa ku elementi popover gy’eyungiddwako.
okulwawo ennamba | ekintu 0.

Okulwawo okulaga n'okukweka popover (ms) - tekikwata ku kika kya manual trigger

Singa ennamba eweebwa, okulwawo kukozesebwa ku byombi okukweka/okulaga

Ensengeka y’ekintu eri nti:delay: { "show": 500, "hide": 100 }
html boolean -kyaamu Teeka HTML mu popover. Bwe kiba kya bulimba, enkola ya jQuery textejja kukozesebwa okuyingiza ebirimu mu DOM. Kozesa ebiwandiiko bw'oba weeraliikirira obulumbaganyi bwa XSS.
okuteekebwa mu kifo olunyiriri | enkola 'kituufu'

Engeri y'okuteeka popover - auto | waggulu | wansi | ku kkono | kituufu.
Bwe autokinaalagibwa, kijja kuddamu okulungamya popover mu ngeri ey’amaanyi.

Omulimu bwe gukozesebwa okuzuula ekifo, guyitibwa nga popover DOM node nga ensonga yaayo esooka ate triggering element DOM node nga eyookubiri. Ensonga thiseteekeddwa ku popover instance.
omusunsuzi olunyiriri | -kyaamu -kyaamu Singa omusunsula aweebwa, ebintu bya popover bijja kuweebwa ebigendererwa ebiragiddwa. Mu nkola, kino kikozesebwa okusobozesa ebirimu bya HTML ebikyukakyuka okuba ne popovers ezigattibwako. Laba kino n'ekyokulabirako ekirimu amawulire .
ekifaananyi ky’ebifaananyi akaguwa '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML okukozesa nga okola popover.

Popover's titleegenda kufuyirwa mu .popover-header.

Popover's contentegenda kufuyirwa mu .popover-body.

.arrowejja kufuuka akasaale ka popover.

Ekintu eky’okuzinga ekisinga ebweru kirina okuba .popovern’ekibiina.
omutwe olunyiriri | elementi | enkola '' .

Omuwendo gw'omutwe ogusookerwako singa titleekintu tekibaawo.

Singa omulimu guweebwa, gujja kuyitibwa nga thisreference yaayo eteekeddwa ku elementi popover gy’eyungiddwako.
okusiikula akaguwa 'nyiga'. Engeri popover gy'etandika - nyweza | hover | okussa essira | maniyo. Oyinza okuyisa ebizibu ebiwerako; zaawule n’ekifo. manualtesobola kugattibwa wamu na kiziyiza kirala kyonna.
offset ennamba | akaguwa 0. Offset ya popover okusinziira ku target yaayo. Okumanya ebisingawo laba Popper.js's offset docs .
fallbackOkuteeka mu kifo olunyiriri | ensengekera 'okukyuusa' Kiriza okulaga ekifo Popper ky'anaakozesa ku fallback. Okumanya ebisingawo laba Popper.js's behavior docs
ensalo olunyiriri | ekintu 'omuzadde omuzingo'. Overflow constraint ensalo ya popover. Ekkiriza emiwendo gya 'viewport', 'window', 'scrollParent', oba ekijuliziddwa HTMLElement (JavaScript yokka). Okumanya ebisingawo laba Popper.js's preventOverflow docs .

Ebikwata ku data ku popovers ssekinnoomu

Enkola za popovers ssekinnoomu zisobola mu ngeri endala okulagibwa okuyita mu kukozesa data attributes, nga bwe kinnyonnyoddwa waggulu.

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwaako . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo.

$().popover(options)

Etandikawo popovers olw'okukung'aanya elementi.

.popover('show')

Abikkula popover ya elementi. Edda eri oyo akubira nga popover tennalagibwa ddala (kwe kugamba nga shown.bs.popoverekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering of the popover. Popovers nga omutwe gwazo n’ebirimu byombi biri zero-length tebiragibwangako.

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

.popover('hide')

Akweka popover ya elementi. Edda eri oyo akubira nga popover tennakwekebwa ddala (kwe kugamba nga hidden.bs.popoverekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering of the popover.

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

.popover('toggle')

Ekyusakyusa popover ya elementi. Edda eri oyo akubira nga popover tennalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.popoveroba hidden.bs.popoverekintu tekinnabaawo). Kino kitwalibwa nga “manual” triggering of the popover.

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

.popover('dispose')

Akweka era asaanyaawo popover ya elementi. Popovers ezikozesa delegation (ezitondebwa nga tukozesa option )selector teziyinza kuzikirizibwa kinnoomu ku descendant trigger elements.

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

.popover('enable')

Awa popover ya elementi obusobozi okulagibwa. Popovers zikozesebwa nga bwe kibadde.

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

.popover('disable')

Eggyawo obusobozi bwa elementi's popover okulagibwa. Popover ejja kusobola okulagibwa singa eddamu okusobozesa.

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

.popover('toggleEnabled')

Toggles obusobozi bwa element's popover okulagibwa oba okukwekebwa.

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

.popover('update')

Ezza obuggya ekifo kya popover ya elementi.

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

Ebibaddewo

Ekika ky’Ekibaddewo Okunnyonnyola
show.bs.obwavu Ekintu kino kikuba amangu ddala nga showenkola ya instance eyitiddwa.
alagiddwa.bs.obwavu Ekintu kino kigobwa nga popover ekoleddwa okulabika eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa).
okukweka.bs.obwavu Ekintu kino kikubwa amangu ddala nga hideenkola ya instance eyitiddwa.
okukwekebwa.bs.obwavu Ekintu kino kigobwa nga popover emaze okukwekebwa okuva eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa).
eyingiziddwa.bs.obwavu Omukolo guno gugobwa oluvannyuma show.bs.popoverlw'omukolo nga popover template eyongezeddwa ku DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})