Iingcebiso
Amaxwebhu kunye nemizekelo yokongeza iingcebiso zesiko le-Bootstrap ngeCSS kunye neJavaScript usebenzisa i-CSS3 yoopopayi kunye neempawu zedatha zogcino lwesihloko sendawo.
Isishwankathelo
Izinto omawuzazi xa usebenzisa iplagi yesixhobo se-tooltip:
- Iingcebiso zezixhobo zixhomekeke kwiqela lesithathu kwithala leencwadi lePopper ngokubekwa . Kufuneka ubandakanye i -popper.min.js phambi kwe-bootstrap.js okanye usebenzise
bootstrap.bundle.min.js
/bootstrap.bundle.js
equlethe iPopper ukuze izixhobo zokusebenza zisebenze! - Ukuba wakha iJavaScript yethu kwimvelaphi, kufuna
util.js
. - Iingcebiso zezixhobo zingenile ngenxa yezizathu zokusebenza, ke kufuneka uziqalise ngokwakho .
- Iingcebiso zezixhobo ezinezihloko ezibude buziro aziboniswa.
- Cacisa
container: 'body'
ukunqanda unikezelo lweengxaki kumacandelo antsokothileyo (njengamaqela ethu egalelo, amaqela amaqhosha, njl.njl). - Iingcebiso zokuqalisa kwizinto ezifihlakeleyo aziyi kusebenza.
- Iingcebiso zesixhobo
.disabled
okanyedisabled
izakhi kufuneka zivuswe kumbandela wokusonga. - Xa iqaliswa ukusuka kwiihyperlink ezithatha imigca emininzi, iincam zesixhobo ziya kubekwa embindini. Sebenzisa
white-space: nowrap;
kwi yakho<a>
ukunqanda lo kuziphatha. - Iingcebiso mazifihlwe phambi kokuba izinto ezihambelanayo nazo zisuswe kwiDOM.
- Iingcebiso zesixhobo zinokuvuswa enkosi kwinto engaphakathi kwesithunzi se-DOM.
prefers-reduced-motion
kumbuzo wemidiya. Jonga icandelo
leentshukumo ezincitshisiweyo kuxwebhu lwethu lofikelelo .
Unayo yonke loo nto? Kulungile, makhe sibone ukuba basebenza njani ngemizekelo ethile.
Umzekelo: Vumela iingcebiso zesixhobo kuyo yonke indawo
Enye indlela yokuqalisa zonke iingcebiso zesixhobo kwiphepha inokuba kukukhetha ngophawu lwazo data-toggle
:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Imizekelo
Hambisa ngaphezulu kwezi linki zingezantsi ukuze ubone iingcebiso zesixhobo:
Isiqendu sesibambi-ndawo sokubonisa amakhonkco angaphakathi ngengcebiso yesixhobo. Oku kukugcwalisa nje, akukho mbulali. Umxholo obekwe apha ukulinganisa ubukho bombhalo wokwenyani . Kwaye konke oko ukukunika umbono wendlela izixhobo zokusebenza ezinokuthi zijongeke ngayo xa zisetyenziswa kwiimeko zokwenyani zehlabathi. Ke ngethemba ukuba ngoku sele ubonile ukuba ezi ngcebiso zesixhobo kwiikhonkco zinokusebenza njani, nje ukuba uzisebenzise kwindawo yakho okanye kwiprojekthi.
Hambisa phezu kwamaqhosha angezantsi ukuze ubone izalathiso zezixhobo ezine: phezulu, ekunene, ezantsi, nasekhohlo.
<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>
Kwaye nge-HTML yesiko elongeziweyo:
<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>
Ukusetyenziswa
Isixhobo se-plugin se-tooltip sivelisa umxholo kunye ne-markup kwimfuno, kwaye ngokungagqibekanga iindawo zeengcebiso zesixhobo emva kwento yazo yokuqalisa.
Qalisa ingcebiso yesixhobo ngeJavaScript:
$('#example').tooltip(options)
Ukuphuphuma auto
kwayescroll
Indawo yengcebiso yesixhobo izama ukuzitshintsha ngokuzenzekelayo xa isikhongozeli somzali sinaso overflow: auto
okanye overflow: scroll
sisithanda .table-responsive
, kodwa sigcina indawo ebekuyo yokuqala. Ukusombulula, seta boundary
ukhetho kuyo nayiphi na enye into ngaphandle kwexabiso elingagqibekanga, 'scrollParent'
elinje 'window'
:
$('#example').tooltip({ boundary: 'window' })
IMarkup
Uphawu olufunekayo lwencam yesixhobo luphawu kuphela data
kwaye title
kwisiqalelo se-HTML unqwenela ukuba nencam yesixhobo. Uphawu oluveliswayo lwencam yesixhobo lulula, nangona lufuna indawo (ngokungagqibekanga, top
lumiselwe yiplagi).
Ukwenza iingcebiso zesixhobo zisebenzele ikhibhodi kunye nabasebenzisi betekhnoloji abancedisayo
Kufuneka wongeze kuphela iingcebiso zesixhobo kwizinto ze-HTML ngokwesiko zekhibhodi-ejolise kwaye isebenze (ezifana namakhonkco okanye ulawulo lwefom). Nangona izinto ze-HTML ezingenamkhethe (ezinje nge- <span>
s) zinokwenziwa ziqwalaselwe ngokongeza tabindex="0"
uphawu, oku kuyakongeza ukumisa okunokucaphukisa kunye nokubhidanisa ithebhu kwizinto ezingasebenzisaniyo kubasebenzisi bebhodi yezitshixo, kwaye uninzi lwetekhnoloji encedisayo ngoku ayazisi inqaku lesixhobo kule meko. Ukongeza, ungathembeli kuphela hover
njengesixhobo sesixhobo sakho, njengoko oku kuya kwenza ukuba izixhobo zakho zesixhobo zingenzeki ukuqalisa kubasebenzisi bebhodi yezitshixo.
<!-- 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>
Izinto ezikhubazekileyo
Izinto disabled
ezinophawu azisebenzi, nto leyo ethetha ukuba abasebenzisi abanakugxila, bashukume, okanye bacofe ukuze baqalise ingcebiso yesixhobo (okanye ipopover). Njengomsebenzi wokusebenza, uya kufuna ukuvusa inqaku lesixhobo ukusuka kwisisongelo <div>
okanye <span>
, eyenziwe ngokufanelekileyo ikhibhodi-ijolise ekusebenziseni tabindex="0"
, kwaye ubhale ngaphezulu pointer-events
kwinto ekhubazekileyo.
<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>
Iinketho
Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-
, njengakwi data-animation=""
.
sanitize
,
sanitizeFn
kwaye
whiteList
iinketho azikwazi kunikezelwa kusetyenziswa iimpawu zedata.
Igama | Uhlobo | Ukuhlala kukho | Inkcazo |
---|---|---|---|
oopopayi | boolean | yinyani | Faka inguqu ye-CSS fade kwi-tooltip |
isikhongozeli | umtya | into | bubuxoki | bubuxoki | Ihlomela incam yesixhobo kwinto ethile. Umzekelo: |
ukulibazisa | inombolo | into | 0 | Ukulibazisa ukubonisa kunye nokufihla isixhobo sesixhobo (ms) - akusebenzi kuhlobo lwesixhobo sokuxhobisa Ukuba inani linikiwe, ukulibaziseka kufakwa kuzo zombini ezifihla/umboniso Ulwakhiwo lwento yile: |
html | boolean | bubuxoki | Vumela i-HTML kwincam yesixhobo. Ukuba yinyaniso, iithegi ze-HTML kwincam yesixhobo Sebenzisa umbhalo ukuba unexhala malunga nohlaselo lwe-XSS. |
ukubekwa | umtya | umsebenzi | 'phezulu' | Uyibeka njani incam yesixhobo - auto | phezulu | emazantsi | ekhohlo | kunene. Xa umsebenzi usetyenziswa ukumisela ukubekwa, ubizwa ngokuba nencam yesixhobo ye-DOM njengengxoxo yayo yokuqala kunye nesiqalo se-DOM node njengesibini sayo. Umxholo |
umkhethi | umtya | bubuxoki | bubuxoki | Ukuba umkhethi unikiwe, izixhobo zesixhobo ziya kunikezelwa kwiithagethi ezichaziweyo. Enyanisweni, oku kusetyenziselwa ukusebenzisa iingcebiso zesixhobo kwizinto ze-DOM ezongeziweyo ( jQuery.on inkxaso). Bona oku kunye nomzekelo ofundisayo . |
ithempleyithi | umtya | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Isiseko se-HTML esinokusetyenziswa xa usenza ingcebiso yesixhobo. Isixhobo se-tooltip
Isiqalelo sokusonga sangaphandle kufuneka sibe |
isihloko | umtya | into | umsebenzi | '' | Ixabiso lesihloko esihlala sihleli ukuba Ukuba umsebenzi unikiwe, uya kubizwa kunye |
ukuxhokonxa | umtya | 'hover focus' | Ivuswa njani ithiphu yesixhobo - cofa | jonga | gxila | incwadi yesandla. Ungadlula ezininzi izichukumisi; bahlule ngesithuba.
|
i-offset | inombolo | umtya | umsebenzi | 0 | Iseti yesixhobo esinxulumene noko kujoliswe kuko. Xa umsebenzi usetyenziselwa ukumisela i-offset, ubizwa ngento equlethe idatha ye-offset njengengxabano yayo yokuqala. Umsebenzi kufuneka ubuyisele into enesakhiwo esifanayo. Isiqalo se-DOM node sigqithiselwe njengengxoxo yesibini. Ngolwazi oluthe vetshe jonga kumaxwebhu e-Popper's offset . |
i-fallbackPlacement | umtya | uluhlu | 'jika' | Vumela ukuxela ukuba yeyiphi indawo iPopper eza kusebenzisa xa ubuya umva. Ngolwazi oluthe vetshe jonga kumaxwebhu okuziphatha kaPopper |
customClass | umtya | umsebenzi | '' | Yongeza iiklasi kwincam yesixhobo xa ibonisiwe. Qaphela ukuba ezi klasi ziya kongezwa ukongeza kuzo naziphi na iiklasi ezichazwe kwithempleyithi. Ukongeza iiklasi ezininzi, zahlule ngezithuba: Ungaphinda ugqithise umsebenzi ozakubuyisela umtya omnye oqulathe amagama odidi olongezelelweyo. |
umda | umtya | isiqalelo | 'skrolaMzali' | Ukuphuphuma komda womda wesixhobo sesixhobo. Yamkela amaxabiso e- 'viewport' , 'window' , 'scrollParent' , okanye i-HTMLElement ireferensi (iJavaScript kuphela). Ngolwazi oluthe vetshe bhekisa kuPopper's preventOverflow docs . |
coceka | boolean | yinyani | Yenza okanye uvale ucoceko. Ukuba ivuliwe 'template' kwaye 'title' iinketho ziyakuhlanjululwa. Jonga icandelo lesicoci kuxwebhu lwethu lweJavaScript . |
Uluhlu olumhlophe | into | Ixabiso elimiselweyo | Into equlathe iimpawu ezivumelekileyo kunye neethegi |
sanizeFn | null | umsebenzi | null | Apha ungabonelela ngomsebenzi wakho wokucoca. Oku kunokuba luncedo ukuba ukhetha ukusebenzisa ithala leencwadi elizinikeleyo ukwenza ucoceko. |
popperConfig | null | into | null | Ukutshintsha uqwalaselo lwePopper lweBootstrap olungagqibekanga, bona uqwalaselo lwePopper |
Iimpawu zedatha kwiingcebiso zesixhobo ngasinye
Iinketho zeengcebiso zesixhobo ngasinye zingachazwa ngokusetyenziswa kweempawu zedatha, njengoko kucacisiwe ngasentla.
Iindlela
Iindlela zeAsynchronous kunye notshintsho
Zonke iindlela ze-API zi -asynchronous kwaye ziqala utshintsho . Babuyela kumnxeba ngokukhawuleza nje ukuba inguqu iqalisiwe kodwa ingekapheli . Ukongeza, ukufowunelwa kwendlela kwicandelo lenguquko kuya kuhoywa .
$().tooltip(options)
Iqhoboshela isibambi sesixhobo kwingqokelela yesiqalelo.
.tooltip('show')
Ityhila inqaku lesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo iboniswe (okt phambi kokuba shown.bs.tooltip
isiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa isixhobo. Iingcebiso zezixhobo ezinezihloko ezibude buziro aziboniswa.
$('#element').tooltip('show')
.tooltip('hide')
Ifihla incam yesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo ifihlwe (okt phambi kokuba hidden.bs.tooltip
isiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa isixhobo.
$('#element').tooltip('hide')
.tooltip('toggle')
Itshintshela incam yesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo iboniswe okanye ifihlwe (okt phambi kokuba isiganeko shown.bs.tooltip
okanye hidden.bs.tooltip
isiganeko senzeke). Oku kuthathwa ngokuba "yimanyuwali" yokuqalisa inqaku lesixhobo.
$('#element').tooltip('toggle')
.tooltip('dispose')
Ifihla kwaye itshabalalise isixhobo sesixhobo. Iingcebiso zesixhobo ezisebenzisa unikezelo (ezenziwe ngokusetyenziswa kokhethoselector
) azinakutshatyalaliswa zizodwa kwiziqalelo zokubangela ukuvela .
$('#element').tooltip('dispose')
.tooltip('enable')
Inika isixhobo sesixhobo sokukwazi ukuboniswa. Iingcebiso zesixhobo zenziwe ngokwendalo.
$('#element').tooltip('enable')
.tooltip('disable')
Isusa isakhono sesixhobo sesixhobo sokuboniswa. Ingcebiso yesixhobo iya kuboniswa kuphela ukuba yenziwe yasebenza kwakhona.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Iguqula isakhono sesixhobo sesixhobo sokuboniswa okanye ukufihlwa.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Ihlaziya indawo yesixhobo sesixhobo.
$('#element').tooltip('update')
Iziganeko
Uhlobo loMnyhadala | Inkcazo |
---|---|
bonisa.bs.ingcebiso yesixhobo | Esi siganeko sivutha ngokukhawuleza xa show kubizwa indlela yomzekelo. |
ingcebiso.bs.isixhobo | Esi siganeko sigxothwa xa i-tooltip yenziwe yabonakala kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe). |
fihla.bs.ingcebiso yesixhobo | Esi siganeko sigxothwa ngokukhawuleza xa hide indlela yomzekelo ibiziwe. |
ingcebiso.bs.isixhobo esifihliweyo | Esi siganeko siyagxothwa xa isixhobo sigqibile ukufihlwa kumsebenzisi (siya kulinda uguqulo lweCSS lugqibe). |
ingcebiso.bs.isixhobo | Esi siganeko sigxothwa emva show.bs.tooltip kwesiganeko xa ithemplate ye-tooltip yongezwa kwi-DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})