Source

Amathuluzi

Amadokhumenti nezibonelo zokwengeza amathiphu wamathuluzi e-Bootstrap ngokwezifiso nge-CSS ne-JavaScript kusetshenziswa i-CSS3 yokugqwayiza kanye nezici zedatha zokugcinwa kwesihloko sasendaweni.

Uhlolojikelele

Izinto okufanele uzazi uma usebenzisa i-plugin ithiphu yamathuluzi:

  • Amathuluzi ancike kulabhulali ye- Popper.js yenkampani yangaphandle ukuze ibekwe. Kufanele ufake i -popper.min.js ngaphambi kwe-bootstrap.js noma usebenzise bootstrap.bundle.min.js/ bootstrap.bundle.jsequkethe i-Popper.js ukuze amathuluzi asebenze!
  • Uma wakha i-JavaScript yethu ngomthombo, idingautil.js .
  • Izeluleko zokungena ngezizathu zokusebenza, ngakho-ke kuzomele uziqalise ngokwakho .
  • Amathuluzi anezihloko zobude obunguziro awaboniswa.
  • Cacisa container: 'body'ukuze ugweme ukunikeza izinkinga ngezingxenye eziyinkimbinkimbi (njengamaqembu ethu okokufaka, amaqembu wezinkinobho, njll).
  • Ukucupha amathiphu kuzinto ezifihliwe ngeke kusebenze.
  • .disabledAmathuluzi noma ama- disabledelementi kufanele acushwe ku -elementi yokugoqa.
  • Uma icushwa isuka kuma-hyperlink anemigqa eminingi, amathiphu amathuluzi azobekwa phakathi nendawo. Sebenzisa white-space: nowrap;kweyakho <a>ukugwema lokhu kuziphatha.
  • Izeluleko zamathuluzi kufanele zifihlwe ngaphambi kokuthi izici ezihambisanayo zikhishwe ku-DOM.
  • Izeluleko zamathuluzi zingaqaliswa ngenxa yento engaphakathi kwesithunzi se-DOM.

Umthelela wokugqwayiza wale ngxenye uncike prefers-reduced-motionembuzweni wemidiya. Bona ingxenye yokunyakaza encishisiwe yemibhalo yethu yokufinyeleleka .

Unakho konke lokho? Kuhle, ake sibone ukuthi basebenza kanjani ngezinye izibonelo.

Isibonelo: Nika amandla izeluleko zamathuluzi yonke indawo

Enye indlela yokuqalisa wonke amathiphu ekhasini kuzoba ukuwakhetha ngesibaluli sawo data-toggle:

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

Izibonelo

Hambisa phezulu kwezixhumanisi ezingezansi ukuze ubone amathuluzi:

Amabhulukwe aqinile ezingeni elilandelayo keffiyeh cishe awuzwanga ngawo. Photo booth intshebe eluhlaza yedenim letterpress vegan messenger bag stumptown. Isambatho se-farm-to-table seitan, i-mcsweeney's fixie sustainable quinoa 8-bit american apparel ine- terry richardson vinyl chambray. Izintshebe stumptown, cardigans banh mi lomo thundercats. I-Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Ingcweti ehlekisayo ngempela whatever keytar , i-movie-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Hambisa phezulu kwezinkinobho ezingezansi ukuze ubone izikhombisi-ndlela zamathuluzi amane: phezulu, kwesokudla, phansi, nakwesokunxele.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Futhi nge-HTML yangokwezifiso yengezwe:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Ukusetshenziswa

I-plugin yethulithiphu ikhiqiza okuqukethwe kanye nemakhaphu ngokufunwayo, futhi ngokuzenzakalelayo beka izeluleko zamathuluzi ngemva kwesici sokucupha.

Qalisa ithiphu yamathuluzi nge-JavaScript:

$('#example').tooltip(options)
Ukuchichima autofuthiscroll

Indawo yethulithiphu izama ukuzishintsha ngokuzenzakalelayo uma isiqukathi esingumzali sine overflow: autonoma overflow: scrollsithanda .table-responsive, kodwa sigcine indawo yokubeka yasekuqaleni. Ukuze uxazulule, setha boundaryinketho kunoma yini enye ngaphandle kwevelu ezenzakalelayo 'scrollParent', njengokuthi 'window':

$('#example').tooltip({ boundary: 'window' })

Imakhaphu

Imakhaphu edingekayo yethiphu yamathuluzi iyisibaluli kuphela datafuthi titleengxenyeni ye-HTML ofisa ukuba nayo ithiphu. Imakhaphu ekhiqiziwe yethiphu yamathuluzi ilula, nakuba idinga indawo (ngokuzenzakalelayo, isethwe topyi-plugin).

Ukwenza izeluleko zamathuluzi zisebenzele abasebenzisi bekhibhodi nobuchwepheshe obusizayo

Kufanele wengeze kuphela izeluleko zamathuluzi ezintweni ze-HTML ngokuvamile ezigxile kukhibhodi futhi ezisebenzisanayo (njengezixhumanisi noma izilawuli zefomu). Nakuba izakhi ze-HTML ezingafanele (ezifana no- <span>s) zingenziwa zigxile ngokwengeza tabindex="0"isibaluli, lokhu kuzongeza izitobhi zamathebhu ezingase zicasule futhi zidideke ezintweni ezingahlangani kubasebenzisi bekhibhodi, futhi ubuchwepheshe obuningi obusizayo okwamanje abumemezeli ithiphu yamathuluzi kulesi simo. Ukwengeza, unganciki kuphela hovernjengesicuphi sethiphu yakho yamathuluzi, njengoba lokhu kuzokwenza ukuthi izethulo zakho zamathuluzi zingakwazi ukuqalisa kubasebenzisi bekhibhodi.

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Izakhi ezikhutshaziwe

Ama- disabledelementi anesibaluli awahlangani, okusho ukuthi abasebenzisi abakwazi ukugxila, ukuhambisa phezulu, noma ukuwachofoza ukuze baqalise ithiphu yamathuluzi (noma i-popover). Njengendlela yokusebenza, uzofuna ukuqalisa ithiphu yamathuluzi kusuka kusonga <div>noma <span>, eyenziwe kahle ukuthi igxile kukhibhodi usebenzisa tabindex="0", bese ubhala pointer-eventsphezu kwento ekhubazekile.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-animation="".

Qaphela ukuthi ngenxa yezizathu zokuphepha i- sanitize, sanitizeFnkanye whiteListnezinketho azikwazi ukunikezwa kusetshenziswa izibaluli zedatha.

Igama Uhlobo Okuzenzakalelayo Incazelo
izithombe boolean iqiniso Faka inguquko ye-CSS fade ethiphu yamathuluzi
isitsha umucu | into | amanga amanga

Yengeza ithiphu entweni ethile. Isibonelo: container: 'body'. Le nketho iwusizo kakhulu ngoba ikuvumela ukuthi ubeke ithiphu yamathuluzi ekugelezeni kwedokhumenti eduze kwento ecuphayo - okuzovimbela ithiphu yamathuluzi ekuntanteni isuke ku-elementi ecuphayo ngesikhathi sokushintsha usayizi wewindi.
ukubambezela inombolo | into 0

Ukubambezeleka ukubonisa nokufihla ithiphu yamathuluzi (ms) - akusebenzi ohlotsheni lwesicupho okwenziwa ngesandla

Uma inombolo inikezwa, ukubambezeleka kusetshenziswa kukho kokubili ukufihla/umbukiso

Isakhiwo sento sithi:delay: { "show": 500, "hide": 100 }
html boolean amanga

Vumela i-HTML ethiphu yamathuluzi.

Uma kuyiqiniso, omaka be-HTML bathiphu titlebazonikezwa kuthulithiphu. Uma kungamanga, indlela ye-jQuery textizosetshenziswa ukufaka okuqukethwe ku-DOM.

Sebenzisa umbhalo uma ukhathazekile ngokuhlaselwa kwe-XSS.
ukubekwa umucu | umsebenzi 'phezulu'

Indlela yokubeka ithiphu yamathuluzi - okuzenzakalelayo | phezulu | phansi | kwesokunxele | kwesokudla.
Uma autokucacisiwe, izohlela kabusha ithiphu lamathuluzi ngamandla.

Uma umsebenzi usetshenziselwa ukunquma ukubekwa, ubizwa ngenodi yethulithiphu ye-DOM njenge-agumenti yayo yokuqala kanye nenodi yento ecuphayo ethi DOM njengesibili. Umongo thisusethelwe kusibonelo sethiphu yamathuluzi.
isikhethi umucu | amanga amanga Uma kunikezwa isikhethi, izinto zethiphu yamathuluzi zizodluliselwa kulokho okuhlosiwe okucacisiwe. Empeleni, lokhu kusetshenziselwa ukusebenzisa namathiphu wamathuluzi kuma-elementi e-DOM angezwe ngamandla ( jQuery.onusekelo). Bheka lokhu kanye nesibonelo esifundisayo .
isifanekiso umucu '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Isisekelo se-HTML ongasisebenzisa lapho udala ithiphu yamathuluzi.

I-tooltip titleizojovwa ku- .tooltip-inner.

.arrowizoba umcibisholo wethiphu yamathuluzi.

I-elementi yokugoqa engaphandle kufanele ibe .tooltipnekilasi kanye role="tooltip".
isihloko umucu | into | umsebenzi ''

Inani lesihloko elizenzakalelayo uma titleisibaluli singekho.

Uma umsebenzi unikiwe, uzobizwa thisnereferensi yawo isethwe ku-elementi ithiphu yamathuluzi enamathiselwe kuyo.
inhlamvu umucu 'hover focus'

Ithiphu yamathuluzi icushwa kanjani - chofoza | hamba | gxila | imanuwali. Ungadlula izibangeli eziningi; abahlukanise ngesikhala.

'manual'ibonisa ukuthi ithiphu lamathuluzi lizoqaliswa ngokohlelo nge- .tooltip('show'), .tooltip('hide')kanye .tooltip('toggle')nezindlela; leli nani alikwazi ukuhlanganiswa nanoma yisiphi esinye isiqalisi.

'hover'ngokwalo kuzoholela kumathiphu amathuluzi angeke acushwe ngekhibhodi, futhi kufanele asetshenziswe kuphela uma ezinye izindlela zokudlulisa ulwazi olufanayo lwabasebenzisi bekhibhodi zikhona.
offset inombolo | umucu | umsebenzi 0

I-offset yethiphu yamathuluzi ngokuhlobene nokuhlosiwe kwayo.

Uma umsebenzi usetshenziselwa ukunquma i-offset, ubizwa ngento equkethe idatha ye-offset njenge-agumenti yayo yokuqala. Umsebenzi kufanele ubuyisele into enesakhiwo esifanayo. Into eqalisayo inodi ye-DOM idluliswa njengempikiswano yesibili.

Ukuze uthole ulwazi olwengeziwe bheka ku-Popper.js's offset docs .
FallbackPlacement umucu | uhlu 'phenya' Vumela ukucacisa ukuthi iyiphi indawo ezosetshenziswa u-Popper ekubuyiseleni emuva. Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti okuziphatha ka-Popper.js
umngcele umucu | isici 'scrollParent' Umkhawulo womkhawulo wokuchichima wethiphu yamathuluzi. Yamukela amanani we- 'viewport', 'window', 'scrollParent', noma ireferensi ye-HTMLElement (JavaScript kuphela). Ukuze uthole ulwazi olwengeziwe bheka ku-Popper.js's preventOverflow amadokhumenti .
hlanza boolean iqiniso Nika amandla noma vala ukukhucululwa kwendle. Uma kucushiwe 'template'futhi 'title'izinketho zizohlanzwa.
I-whiteList into Inani elizenzakalelayo Into equkethe izibaluli namathegi avunyelwe
sanitizeFn null | umsebenzi null Lapha ungakwazi ukunikeza umsebenzi wakho we-sanitize. Lokhu kungaba usizo uma ukhetha ukusebenzisa umtapo wolwazi ozinikele ukwenza ukukhucululwa kwendle.
popperConfig null | into null Ukuze uguqule ukucushwa kwe-Bootstrap okuzenzakalelayo kwe-Popper.js, bona ukucushwa kwe-Popper.js

Izibaluli zedatha zamathiphu wamathuluzi angawodwana

Izinketho zamathiphu wamathuluzi ngamanye zingacaciswa ngokusebenzisa izibaluli zedatha, njengoba kuchazwe ngenhla.

Izindlela

Izindlela ze-Asynchronous kanye noshintsho

Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, ikholi yendlela engxenyeni yoshintsho izozitshwa .

Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .

$().tooltip(options)

Inamathisela isibambi sethulithiphu eqoqweni lesici.

.tooltip('show')

Iveza ithulithiphu yento ethile. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi iboniswe (okungukuthi ngaphambi kokuthi shown.bs.tooltipkwenzeke umcimbi). Lokhu kuthathwa njengokucupha “okuzenzela” ithiphu yamathuluzi. Amathuluzi anezihloko zobude obunguziro awaboniswa.

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

.tooltip('hide')

Ifihla ithiphu yento ethile. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi ifihlekile (okungukuthi ngaphambi kokuthi hidden.bs.tooltipkwenzeke umcimbi). Lokhu kuthathwa njengokucupha “okuzenzela” ithiphu yamathuluzi.

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

.tooltip('toggle')

Iguqula ithiphu lethuluzi le-elementi. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi iboniswe noma ifihlwe (okungukuthi ngaphambi kokuthi kwenzeke shown.bs.tooltipnoma hidden.bs.tooltipkwenzeke). Lokhu kuthathwa njengokucupha “okuzenzela” ithiphu yamathuluzi.

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

.tooltip('dispose')

Ifihla futhi ibhubhise ithiphu yento ethile. Amathuluzi asebenzisa ukuthunyelwa (okudalwe kusetshenziswa inkethoselector ) awakwazi ukucekelwa phansi ngamanye ezintweni ezibangela inzalo .

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

.tooltip('enable')

Inikeza ithuluzi le-elementi ikhono lokuboniswa. Amathiphu amathuluzi anikwe amandla ngokuzenzakalela.

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

.tooltip('disable')

Isusa ikhono lethulithiphu yento ezoboniswa. Ithiphu yamathuluzi izokwazi ukuboniswa kuphela uma inikwe amandla kabusha.

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

.tooltip('toggleEnabled')

Iguqula ikhono lethulithiphu yento ukuthi iboniswe noma ifihlwe.

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

.tooltip('update')

Ibuyekeza indawo yethulithiphu yento.

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

Imicimbi

Uhlobo Lomcimbi Incazelo
show.bs.tooltip Lo mcimbi uvutha ngokushesha lapho showindlela yesibonelo ibizwa.
ikhonjisiwe.bs.ithulithiphu Lo mcimbi uyaxoshwa uma ithiphu yethuluzi yenziwe yabonakala kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele).
fihla.bs.ithulithiphu Lo mcimbi uxoshwa ngokushesha lapho hideindlela yesibonelo ibizwa.
ifihlwe.bs.ithulithiphu Lo mcimbi uyaxoshwa uma ithiphu yamathuluzi isiqedile ukufihlwa kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele).
inserted.bs.tooltip Lo mcimbi uxoshwa ngemva show.bs.tooltipkomcimbi lapho ithempulethi yethulithiphu yengezwe ku-DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})