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 ku- Popper yelabhulali yenkampani yangaphandle ukuze ibekwe. Kufanele ufake i -popper.min.js ngaphambi kwe-bootstrap.js noma usebenzise
bootstrap.bundle.min.js
/bootstrap.bundle.js
equkethe i-Popper ukuze amathuluzi asebenze! - Uma wakha i-JavaScript yethu ngomthombo, idinga
util.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.
.disabled
Amathuluzi noma ama-disabled
elementi 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.
prefers-reduced-motion
embuzweni 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:
Umbhalo wesimeli ukukhombisa izixhumanisi ezingaphakathi kolayini namathiphu wamathuluzi. Lokhu manje sekuwukugcwalisa nje, akukho mbulali. Okuqukethwe okubekwe lapha ukuze nje kulingise ubukhona bombhalo wangempela . Futhi konke lokho nje ukukunikeza umbono wokuthi izeluleko zamathuluzi zingabukeka kanjani uma zisetshenziswa ezimeni zomhlaba wangempela. Ngakho-ke ngethemba ukuthi usubonile manje ukuthi lawa macebiso amathuluzi ezixhumanisi angasebenza kanjani, uma usuwasebenzisa kusayithi lakho noma iphrojekthi.
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 auto
futhiscroll
Indawo yethulithiphu izama ukuzishintsha ngokuzenzakalelayo uma isiqukathi esingumzali sine overflow: auto
noma overflow: scroll
sithanda .table-responsive
, kodwa sigcine indawo yokubeka yasekuqaleni. Ukuze uxazulule, setha boundary
inketho kunoma yini enye ngaphandle kwevelu ezenzakalelayo 'scrollParent'
, njengokuthi 'window'
:
$('#example').tooltip({ boundary: 'window' })
Imakhaphu
Imakhaphu edingekayo yethiphu yamathuluzi iyisibaluli kuphela data
futhi title
engxenyeni ye-HTML ofisa ukuba nayo ithiphu. Imakhaphu ekhiqiziwe yethiphu yamathuluzi ilula, nakuba idinga indawo (ngokuzenzakalelayo, isethwe top
yi-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 hover
njengesicuphi 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- disabled
elementi 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-events
phezu 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=""
.
sanitize
,
sanitizeFn
kanye
whiteList
nezinketho 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: |
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: |
html | boolean | amanga | Vumela i-HTML ethiphu yamathuluzi. Uma kuyiqiniso, omaka be-HTML bathiphu Sebenzisa umbhalo uma ukhathazekile ngokuhlaselwa kwe-XSS. |
ukubekwa | umucu | umsebenzi | 'phezulu' | Indlela yokubeka ithiphu yamathuluzi - okuzenzakalelayo | phezulu | phansi | kwesokunxele | kwesokudla. Uma umsebenzi usetshenziselwa ukunquma ukubekwa, ubizwa ngenodi yethulithiphu ye-DOM njenge-agumenti yayo yokuqala kanye nenodi yento ecuphayo ethi DOM njengesibili. Umongo |
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.on usekelo). 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
I-elementi yokugoqa engaphandle kufanele ibe |
isihloko | umucu | into | umsebenzi | '' | Inani lesihloko elizenzakalelayo uma Uma umsebenzi unikiwe, uzobizwa |
inhlamvu | umucu | 'hover focus' | Ithiphu yamathuluzi icushwa kanjani - chofoza | hamba | gxila | imanuwali. Ungadlula izibangeli eziningi; abahlukanise ngesikhala.
|
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 amadokhumenti e-Popper's offset . |
FallbackPlacement | umucu | uhlu | 'phenya' | Vumela ukucacisa ukuthi iyiphi indawo ezosetshenziswa u-Popper ekubuyiseleni emuva. Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti okuziphatha kaPopper |
customClass | umucu | umsebenzi | '' | Engeza amakilasi ethiphu yamathuluzi uma ikhonjiswa. Qaphela ukuthi lawa makilasi azokwengezwa ngaphezu kwanoma yimaphi amakilasi ashiwo kusifanekiso. Ukwengeza amakilasi amaningi, wahlukanise ngezikhala: Ungakwazi futhi ukudlulisa umsebenzi okufanele ubuyisele uchungechunge olulodwa oluqukethe amagama ekilasi engeziwe. |
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 amadokhumenti e-Popper's preventOverflow . |
hlanza | boolean | iqiniso | Nika amandla noma vala ukukhucululwa kwendle. Uma kucushiwe 'template' futhi 'title' izinketho zizohlanzwa. Bheka isigaba se-sanitizer emibhalweni yethu ye-JavaScript . |
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 | Ukushintsha ukucushwa kwe-Popper okuzenzakalelayo kwe-Bootstrap, bona ukucushwa kwe-Popper |
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.tooltip
kwenzeke 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.tooltip
kwenzeke 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.tooltip
noma hidden.bs.tooltip
kwenzeke). 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 show indlela 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 hide indlela 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.tooltip komcimbi lapho ithempulethi yethulithiphu yengezwe ku-DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})