in English

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 eka 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 leswaku ti-popovers 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 .text-nowrapeka 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.
  • Popovers yinga pfuriwa hiku khensa element endzeni ka shadow DOM.
Hi ku tiyimisela, xiphemu lexi xi tirhisa xibasisi xa nhundzu lexi akiweke endzeni, lexi hluvulaka swiaki swihi na swihi swa HTML leswi nga pfumeleriwangiki hi ku kongoma. Vona xiyenge xa ​​sanitizer eka matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala.
Vuyelo bya animation bya xiphemu lexi byi titshege hi prefers-reduced-motionxivutiso xa midiya. Vona xiyenge xa ​​ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .

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

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)
Ku hatlisa ka GPU

Popovers minkarhi yin’wana yi vonaka yi nga vonaki kahle eka switirhisiwa swa Windows 10 hikwalaho ka ku hatlisa ka GPU na DPI ya sisiteme leyi cinciweke. Ntlhantlho wa leswi eka v4 i ku tshikisa ku hatlisa ka GPU tanihilaha swi lavekaka hakona eka ti-popover ta wena.

Ku lulamisiwa loku ringanyetiweke:

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

Ku endla leswaku ti-popover ti tirha eka vatirhisi va khibhodi ni thekinoloji yo pfuneta

Ku pfumelela vatirhisi va khibhodi ku tirhisa ti-popover ta wena, u fanele ku ti engetela ntsena eka swiaki swa HTML leswi hi ntolovelo swi kongomisiweke eka khibhodi na ku tirhisana (ku fana na swihlanganisi kumbe vulawuri bya fomo). Hambileswi swiaki swa HTML swa ku tihlawulela (swo tanihi <span>s) swi nga endliwaka swi kongomisiwa hi ku engetela tabindex="0"xihlawulekisi, leswi swi ta engetela ku yima ka tithebhu loku nga ha hlundzukisaka ni ku pfilunganya eka swiaki leswi nga riki swa vuhlanganisi eka vatirhisi va khibhodi, naswona thekinoloji yo tala leyi pfunaka sweswi a yi tivisi swilo swa popover eka xiyimo lexi . Ku engetela kwalaho, u nga titshegi ntsena hi hovertanihi xihlohloteri xa ti-popover ta wena, tanihi leswi leswi swi nga ta endla leswaku ti nga koteki ku ti pfuxa eka vatirhisi va khibhodi.

Hambileswi u nga nghenisaka HTML leyi fuweke, leyi hlelekeke eka ti-popovers hi htmlnhlawulo, hi ringanyeta swinene leswaku u papalata ku engetela nhlayo leyi tlulaka mpimo ya swilo leswi nga endzeni. Ndlela leyi ti popovers ti tirhaka ha yona sweswi hileswaku, loko ti kombisiwile, leswi nga endzeni ka swona swi boheleriwe eka trigger element leyi nga na aria-describedbyattribute. Hikwalaho ka sweswo, hinkwaswo leswi nga endzeni ka popover swi ta tivisiwa eka vatirhisi va thekinoloji leyi pfunaka tanihi xirhendzevutana xin’we xo leha, lexi nga kavanyetiwiki.

Ku engetela kwalaho, hambi leswi swi kotekaka ku tlhela u katsa vulawuri byo tirhisana (ku fana na swiaki swa xivumbeko kumbe swihlanganisi) eka popover ya wena (hi ku engetela swiaki leswi eka whiteListkumbe swihlawulekisi leswi pfumeleriweke na tithegi), tiva leswaku sweswi popover a yi lawuli ku landzelelana ka ku kongomisa ka khibhodi. Loko mutirhisi wa khibhodi a pfula popover, ku kongomisa ku tshama eka elemente leyi pfuxaka, naswona tanihi leswi popover hi ntolovelo yi nga hatliki ku landzelela trigger eka xivumbeko xa tsalwa, a ku na xitiyisekiso xa leswaku ku ya emahlweni/ku tshikilelaTAByi ta yisa mutirhisi wa khibhodi eka popover hi yoxe. Hi ku komisa, ku engetela ntsena vulawuri byo tirhisana eka popover swi nga ha endla leswaku vulawuri lebyi byi nga fikeleleki/ byi nga tirhisiwi eka vatirhisi va khibhodi na vatirhisi va thekinoloji yo pfuneta, kumbe hi mpimo lowutsongo swi endla leswaku ku va na oda ya ku kongomisa hi ku angarhela leyi nga twisisekiki. Eka swiyimo leswi, anakanya hi ku tirhisa mbulavurisano wa modal ematshan’wini ya sweswo.

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

Xiya leswaku hikwalaho ka swivangelo swa vuhlayiseki sanitize, sanitizeFnna whiteListswihlawulekisi a swi nge nyikiwi hi ku tirhisa swihlawulekisi swa data.
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. manuala yi nge hlanganisiwi ni 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'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's behavior docs
Tlilasi ya ntolovelo ntambhu ya xirhendzevutani | ntirho '' .

Engetela titlilasi eka popover loko yi kombisiwa. Xiya leswaku titlilasi leti ti ta engeteriwa ku engetela eka titlilasi tihi na tihi leti boxiweke eka xifaniso. Ku engetela titlilasi to tala, ti hambanise hi swivandla: 'a b'.

U nga ha tlhela u hundzisela ntirho lowu faneleke ku vuyisa ntambhu yin’we leyi nga na mavito ya titlilasi yo engetela.
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's preventOverflow docs .
ku basisa xitsonga xitsonga ntiyiso Endla leswaku ku tirhisiwa kumbe ku tshikisa ku basisiwa. If activated 'template', 'content'na 'title'swihlawulekisi swi ta sanitized. Vona xiyenge xa ​​sanitizer eka matsalwa ya hina ya JavaScript .
Nxaxamelo wo basa nchumu Nhlayo ya xiviri Nchumu lowu nga na swihlawulekisi leswi pfumeleriweke na tithegi
ku basisaFn null | ntirho hava Laha unga phakela ntirho wa wena wa sanitize. Leswi swinga pfuna loko u tsakela ku tirhisa layiburari leyi tinyiketeleke ku endla ku basisiwa.
xivumbeko xa popper null | nchumu hava Ku cinca xivumbeko xa Popper xa xiviri xa Bootstrap, vona xivumbeko xa Popper

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. Popovers leyi tirhisaka delegation (leswi endliwaka hi ku tirhisa selectoroption ) a yi nge herisiwi hi yoxe 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...
})