Source

Popovers

Matsalwa na swikombiso swo engetela ti-popover ta Bootstrap, ku fana na leti kumekaka eka iOS, eka elemente yihi na yihi eka sayiti ya wena.

Nkatsakanyo

Swilo leswi u faneleke u swi tiva loko u tirhisa plugin ya popover:

  • Popovers yi titshege hi layiburari ya 3rd party Popper.js ku veka xiyimo. U fanele ku katsa popper.min.js emahlweni ka bootstrap.js kumbe u tirhisa bootstrap.bundle.min.js/ bootstrap.bundle.jsleyi nga na Popper.js leswaku ti-popover ti tirha!
  • Popovers yi lava plugin ya tooltip tanihi ku titshega.
  • Loko u aka JavaScript ya hina ku suka eka xihlovo, swi lavautil.js .
  • Ti-popovers i ti-opt-in hikwalaho ka swivangelo swa matirhelo, hikwalaho u fanele u ti sungula hi wexe .
  • Zero-length titlena contentvalues ​​a swi nge pfuki swi kombisi popover.
  • Boxa container: 'body'ku papalata swiphiqo swa ku hundzuluxela eka swiphemu leswi rharhanganeke swinene (ku fana na mintlawa ya hina ya ku nghenisa, mintlawa ya swikomba-nkarhi, na swin’wana).
  • Ku hlohlotela ti-popovers eka swiaki leswi fihliweke a swi nge tirhi.
  • Popovers for .disabledkumbe disabledti elements tifanele ku pfuriwa eka element ya wrapper.
  • Loko yi hlohleteriwa kusuka eka ti anchors leti phutselaka eka milayeni yotala, ti popovers titava tiri exikarhi exikarhi ka ku anama hinkwako ka ti anchors. Tirhisa white-space: nowrap;eka s ya wena <a>ku papalata mahanyelo lawa.
  • Ti popovers tifanele ku fihliwa loko ti elements ta tona leti fambelanaka tinga se susiwa eka DOM.

Tshama u ri karhi u hlaya ku vona ndlela leyi ti- popover ti tirhaka ha yona hi swikombiso swin’wana.

Xikombiso: Endla leswaku ti-popovers ti tirha hinkwako-nkwako

Ndlela yin’wana yo sungula ti-popover hinkwato eka tluka ku nga va ku ti hlawula hi data-togglexihlawulekisi xa tona:

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

Xikombiso: Ku tirhisa containernhlawulo

Loko u ri na switayele swin’wana eka elemente ya mutswari leswi kavanyetaka popover, u ta lava ku boxa ntolovelo containerleswaku HTML ya popover yi humelela endzeni ka elemente yoleyo ematshan’wini ya sweswo.

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

Xikombiso

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

Tindlela ta mune

Ku ni swilo swa mune leswi u nga swi hlawulaka: leswi ringanisiweke ehenhla, exineneni, ehansi ni le ximatsi.

<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 eka ku click loku landzelaka

Tirhisa focusxihlohloteri ku hlongola ti-popover eka ku tsindziyela loku landzelaka ka mutirhisi ka elemente yo hambana ku tlula elemente yo cinca-cinca.

Ku laveka ku fungha ko karhi eka ku hlongoriwa-eka-ku-click loku landzelaka

Ku kuma mahanyelo lamanene ya cross-browser na cross-platform, u fanele ku tirhisa <a>thegi, ku nga ri <button>thegi, naswona u fanele ku tlhela u katsa tabindexxihlawulekisi.

Ku hlongoriwa 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'
})

Swiaki leswi lamaleke

Swiaki leswi nga na disabledxihlawulekisi a swi tirhisani, leswi vulaka leswaku vatirhisi a va nge swi koti ku hover kumbe ku swi tsindziyela ku pfuxa popover (kumbe tooltip). Tanihi ndlela yo tshungula, u ta lava ku pfuxa popover ku suka eka xifunengeto <div>kumbe <span>na ku tlula the pointer-eventson the disabled element.

Eka swihlohloteri swa popover leswi lamaleke, u nga ha tlhela u tsakela data-trigger="hover"leswaku popover yi humelela tanihi vuyelo bya xihatla bya xivono eka vatirhisi va wena tanihileswi va nga ha langutelaka ku tikhoma eka elemente leyi lamaleke.

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

Matirhiselo

Endla leswaku ti-popovers ti tirha hi ku tirhisa JavaScript:

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

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-animation="".

Vito Muxaka Ku tlula Nhlamuselo
ku endla swifaniso leswi hanyaka xitsonga xitsonga ntiyiso Tirhisa ku cinca ka CSS fade eka popover
xigwitsirisi ntambhu ya xirhendzevutani | xiaki xa | vunwa vunwa

Ku engetela popover eka elemente yo karhi. Xikombiso: container: 'body'. Nhlawulo lowu wu pfuna ngopfu hikuva wu ku pfumelela ku veka popover eka ku khuluka ka tsalwa ekusuhi na elemente yo hlohlotela - leswi nga ta sivela popover ku papamala ekule na elemente yo hlohlotela hi nkarhi wa ku cinca sayizi ya fasitere.
vundzeni ntambhu ya xirhendzevutani | xiaki xa | ntirho '' .

Ntsengo wa nhundzu ya xiviri loko data-contentxihlawulekisi xi nga ri kona.

Loko ntirho wu nyikiwile, wu ta vitaniwa hi thissete ya wona ya xikombo eka elemente leyi popover yi khomanisiweke na yona.
hlwela nomboro | nchumu 0.

Ku hlwela ku kombisa na ku tumbeta popover (ms) - a swi tirhi eka muxaka wa manual trigger

Loko nomboro yi nyikiwile, ku hlwela ku tirhisiwa eka havumbirhi bya ku fihla/kombisa

Xivumbeko xa nchumu i:delay: { "show": 500, "hide": 100 }
html xitsonga xitsonga vunwa Nghenisa HTML eka popover. Loko ku ri mavunwa, ndlela ya jQuery textyi ta tirhisiwa ku nghenisa nhundzu eka DOM. Tirhisa tsalwa loko u vilerisiwa hi nhlaselo wa XSS.
ku vekiwa ka swilo ntambhu ya xirhendzevutani | ntirho 'mfanelo'

Ndlela yo veka popover - auto | ehenhla | ehansi | ximatsi | mfanelo.
Loko autoswi boxiwile, yi ta dynamically yi tlhela yi kongomisa popover.

Loko ntirho wu tirhisiwa ku kumisisa ku vekiwa, wu vitaniwa hi popover DOM node tanihi argument ya wona yo sungula na triggering element DOM node tanihi ya vumbirhi. Mongo thiswu vekiwile eka xikombiso xa popover.
xihlawulekisi xa swilo ntambhu ya xirhendzevutani | vunwa vunwa Loko ku nyikiwile xihlawulekisi, swilo swa popover swi ta nyikiwa swikongomelo leswi boxiweke. Hi ku tirhisa, leswi swi tirhisiwa ku endla leswaku nhundzu ya HTML leyi cinca-cincaka yi va na ti-popover leti engeteriweke. Vona leswi ni xikombiso lexi dyondzisaka .
xifaniso xa xifaniso ntambu '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML ku tirhisa loko u endla popover.

Popover's titleyi ta cheriwa eka .popover-header.

Popover's contentyi ta cheriwa eka .popover-body.

.arrowyi ta hundzuka nseve wa popover.

Xiphemu xa le handle xa xifunengeto xi fanele ku va na .popovertlilasi.
xirhangi ntambhu ya xirhendzevutani | xiaki xa | ntirho '' .

Nhlayo ya xihloko xa xiviri loko titlexihlawulekisi xi nga ri kona.

Loko ntirho wu nyikiwile, wu ta vitaniwa hi thissete ya wona ya xikombo eka elemente leyi popover yi khomanisiweke na yona.
gwedla ntambu 'click'. Ndlela leyi popover yi sungulaka ha yona - click | hover | ku kongomisa | manyuwali. U nga ha hundza swihlohloteri swo tala; va hambanise hi xivandla. `manual` a yi nge hlanganisiwi na xihlohloteri xin'wana.
offset nomboro | ntambu 0. Offset ya popover loko yi pimanisiwa na target ya yona. Ku kuma vuxokoxoko byo tala languta eka Popper.js's offset docs .
fallbackKu vekiwa ka swilo ntambhu ya xirhendzevutani | array ya xirhendzevutani 'hundzuluxa' Pfumelela ku boxa leswaku hi xihi xiyimo lexi Popper a nga ta xi tirhisa eka fallback. Ku kuma vuxokoxoko byo tala languta eka Popper.js's behavior docs
ndzilakano ntambhu ya xirhendzevutani | nchumu 'ScrollMutswari'. Overflow constraint ndzilakano wa popover. Ku amukela mimpimo ya 'viewport', 'window', 'scrollParent', kumbe xikombo xa HTMLElement (JavaScript ntsena). Ku kuma vuxokoxoko byo tala languta eka Popper.js's preventOverflow docs .

Swihlawulekisi swa data swa ti-popover ta munhu hi xiyexe

Swihlawulekisi swa ti popovers ha yin’we yin’we tinga boxiwile hindlela yin’wana hiku tirhisa swihlawulekisi swa data, tani hileswi swinga hlamuseriwa laha henhla.

Maendlelo

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala.

$().popover(options)

Ku sungula ti-popovers ta nhlengeleto wa swiaki.

.popover('show')

Ku paluxa popover ya elemente. Ku tlhelela eka mufoyini loko popover yi nga si kombisiwa hakunene (i.e. shown.bs.popoverxiendlakalo xi nga si humelela). Leswi swi tekiwa tanihi ku hlohlotela “manual” ka popover. Ti-popover leti nhloko-mhaka ya tona ni leswi nga endzeni ka tona swi nga zero-length a swi si tshama swi kombisiwa.

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

.popover('hide')

Ku tumbeta popover ya elemente. Ku tlhelela eka mufoyini loko popover yi nga si fihliwa hakunene (i.e. hidden.bs.popoverxiendlakalo xi nga si humelela). Leswi swi tekiwa tanihi ku hlohlotela “manual” ka popover.

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

.popover('toggle')

Ku cinca-cinca popover ya elemente. Ku tlhelela eka mufoyini loko popover yi nga si kombisiwa hakunene kumbe ku tumbetiwa (i.e. emahlweni ka ku humelela shown.bs.popoverkumbe hidden.bs.popoverxiendlakalo). Leswi swi tekiwa tanihi ku hlohlotela “manual” ka popover.

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

.popover('dispose')

Ku tumbeta no herisa popover ya element. Ti popovers leti tirhisaka delegation (leti endliwaka hi ku tirhisa selectoroption ) a ti nge herisiwi hi toxe eka ti descendant trigger elements.

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

.popover('enable')

Swi nyika popover ya elemente vuswikoti byo kombisiwa. Popovers yi tirhisiwa hi ku tiyimisela.

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

.popover('disable')

Ku susa vuswikoti bya ku kombisiwa ka popover ya elemente. Popover yi ta kota ku kombisiwa ntsena loko yi tlhela yi tirhisiwa.

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

.popover('toggleEnabled')

Toggles vuswikoti bya leswaku popover ya element yi kombisiwa kumbe ku fihliwa.

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

.popover('update')

Ku pfuxeta xiyimo xa popover ya elemente.

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

Swiendlakalo

Muxaka wa Xiendlakalo Nhlamuselo
kombisa.bs.vusiwana Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku showvitaniwa ndlela ya xikombiso.
swi kombisiwile.bs.vusiwana Xiendlakalo lexi xi hlongoriwa loko popover yi endliwile yi vonaka eka mutirhisi (yi ta rindza ku cinca ka CSS ku hela).
tumbeta.bs.vusiwana Xiendlakalo lexi xi duvuriwa hi ku hatlisa loko ndlela ya hidexikombiso yi vitaniwile.
swi fihliwile.bs.vusiwana Xiendlakalo lexi xi duvuriwa loko popover yi hetile ku tumbetiwa eka mutirhisi (yi ta rindza ku cinca ka CSS ku hela).
ku nghenisiwile.bs.vusiwana Xiendlakalo lexi xi hlongoriwa endzhaku ka show.bs.popoverxiendlakalo loko xifaniso xa popover xi engeteriwile eka DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})