Source

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 kwithala leencwadi le-3rd Popper.js ngokubekwa . Kufuneka ubandakanye i -popper.min.js phambi kwe-bootstrap.js okanye usebenzise bootstrap.bundle.min.js/ bootstrap.bundle.jsequlethe i-Popper.js ukuze izixhobo zokusebenza zisebenze!
  • Ukuba wakha iJavaScript yethu kwimvelaphi, kufunautil.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 .disabledokanye disabledizakhi kufuneka zivuswe kuphawu lokusonga.
  • Xa iqaliswa ukusuka kwiihyperlink ezithatha imigca emininzi, iincam zesixhobo ziya kugxilwa. Sebenzisa white-space: nowrap;kwi yakho <a>ukunqanda le ukuziphatha.
  • Iingcebiso kufuneka zifihlwe phambi kokuba izinto ezihambelanayo nazo zisuswe kwiDOM.
  • Iingcebiso zesixhobo zinokuqhutywa enkosi kwinto engaphakathi kwesithunzi se-DOM.

Isiphumo soopopayi seli candelo sixhomekeke prefers-reduced-motionkumbuzo 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:

Iibhulukhwe eziqinileyo kwinqanaba elilandelayo keffiyeh mhlawumbi awuzange uve ngazo. Photo booth iindevu ekrwada idenim letterpress vegan messenger bag stumptown. Ifama-to-itheyibhile seitan, i-mcsweeney's fixie ezinzileyo iquinoa ye-8-bit yaseMelika isambatho sine - terry richardson vinyl chambray. Iindevu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Igcisa elihlekisayo ngokwenene whatever keytar , i-scenar farm-to-table banksy Austin twitter handle freegan cred krwada idenim enye-origin ikofu viral.

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 ye-trigger.

Qalisa ingcebiso yesixhobo ngeJavaScript:

$('#example').tooltip(options)
Ukuphuphuma autokwayescroll

Indawo yengcebiso yesixhobo izama ukuzitshintsha ngokuzenzekelayo xa isikhongozeli somzali sinaso overflow: autookanye overflow: scrollsisithanda .table-responsive, kodwa sigcina indawo ebekuyo yokuqala. Ukusombulula, seta boundaryukhetho kuyo nayiphi na enye into ngaphandle kwexabiso elingagqibekanga, 'scrollParent'elinje 'window':

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

IMarkup

Uphawu olufunekayo lwencam yesixhobo luphawu kuphela datakwaye titlekwisiqalelo se-HTML unqwenela ukuba nencam yesixhobo. Uphawu oluveliswayo lwencam yesixhobo lulula, nangona lufuna indawo (ngokungagqibekanga, toplumiselwe 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 hovernjengesixhobo 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 disabledezinophawu azisebenzi, nto leyo ethetha ukuba abasebenzisi abanakugxila, bashukume, okanye bacofe ukuze baqalise ingcebiso yesixhobo (okanye ipopover). Njengendlela yokusebenza, uya kufuna ukuvusa inqaku lesixhobo ukusuka kwisisongelo <div>okanye <span>, eyenziwe ngokufanelekileyo ikhibhodi-ijolise ekusebenziseni tabindex="0", kwaye ubhale ngaphezulu pointer-eventskwinto 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="".

Qaphela ukuba ngenxa yezizathu zokhuseleko sanitize, sanitizeFnkwaye whiteListiinketho 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: container: 'body'. Olu khetho luluncedo kakhulu kuba lukuvumela ukuba ubeke incam yesixhobo sokuhamba koxwebhu kufutshane nesiqalo esixhobisayo - esiza kuthintela incam yesixhobo ekudada kuyo ukusuka kwinto exhokonxayo ngexesha lokutshintsha ubungakanani befestile.
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:delay: { "show": 500, "hide": 100 }
html boolean bubuxoki

Vumela i-HTML kwincam yesixhobo.

Ukuba yinyaniso, iithegi ze-HTML kwincam yesixhobo titleziya kunikezelwa kwincam yesixhobo. Ukuba ayiyonyani, textindlela yejQuery izakusetyenziswa ukufaka umxholo kwiDOM.

Sebenzisa umbhalo ukuba unexhala malunga nohlaselo lwe-XSS.
ukubekwa umtya | umsebenzi 'phezulu'

Uyibeka njani incam yesixhobo - auto | phezulu | emazantsi | ekhohlo | kunene.
Xa autoikhankanyiwe, izakuhlengahlengisa kwakhona incam yesixhobo.

Xa umsebenzi usetyenziswa ukumisela ukubekwa, ubizwa ngokuba nencam yesixhobo ye-DOM njengengxoxo yayo yokuqala kunye nesiqalo se-DOM node njengesibini sayo. Umxholo thisumiselwe kumzekelo wencam yesixhobo.
umkhethi umtya | bubuxoki bubuxoki Ukuba umkhethi unikiwe, izixhobo zesixhobo ziya kunikezelwa kwiithagethi ezichaziweyo. Ngokwesiqhelo, oku kusetyenziselwa ukusebenzisa iingcebiso zesixhobo kwizinto ezongeziweyo zeDOM ( jQuery.oninkxaso). 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 esiza kusetyenziswa xa usenza ithiphu yesixhobo.

Isixhobo se-tooltip titlesiyakutofwa kwifayile ye .tooltip-inner.

.arrowiya kuba lutolo lwesixhobo.

Isiqalelo sokusonga sangaphandle kufuneka sibe .tooltipneklasi kunye role="tooltip".
isihloko umtya | into | umsebenzi ''

Ixabiso lesihloko esihlala sihleli ukuba titleuphawu loyelelwano alukho.

Ukuba umsebenzi unikiwe, uya kubizwa kunye thisneseti yawo yereferensi kwinto encanyathiselwe kuyo isixhobo.
ukuxhokonxa umtya 'hover focus'

Ivuswa njani ithiphu yesixhobo - cofa | jonga | gxila | incwadi yesandla. Ungadlula ezininzi izichukumisi; bahlule ngesithuba.

'manual'ibonisa ukuba incam yesixhobo iya kuqhutywa ngokwenkqubo nge .tooltip('show'), .tooltip('hide')kunye .tooltip('toggle')neendlela; eli xabiso alinakudityaniswa naso nasiphi na esinye isiqhumiso.

'hover'ngokwayo iyakukhokelela kwiingcebiso zesixhobo ezingenakuqaliswa ngebhodi yezitshixo, kwaye kufuneka isetyenziswe kuphela ukuba ezinye iindlela zokuhambisa ulwazi olufanayo kubasebenzisi bebhodi yezitshixo zikhona.
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 kratya jonga kwi-Popper.js's offset docs .
i-fallbackPlacement umtya | uluhlu 'jika' Vumela ukuxela ukuba yeyiphi indawo iPopper eza kusebenzisa xa ubuya umva. Ngolwazi oluthe vetshe bhekisa kuPopper.js's behaviour docs
umda umtya | isiqalelo 'skrolaMzali' Ukuphuphuma komda womda wesixhobo. Yamkela amaxabiso e- 'viewport', 'window', 'scrollParent', okanye i-HTMLElement ireferensi (iJavaScript kuphela). Ngolwazi oluthe vetshe bhekisa kuPopper.js's preventOverflow docs .
coceka boolean yinyani Yenza okanye uvale ucoceko. Ukuba ivuliwe 'template'kwaye 'title'iinketho ziyakuhlanjululwa.
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 olungagqibekanga lweBootstrap lwePopper.js, bona uqwalaselo lwePopper.js

Iimpawu zedatha kwiingcebiso zesixhobo ngasinye

Iinketho zeengcebiso zesixhobo ngasinye zinokuchazwa ngokusetyenziswa kweempawu zedatha, njengoko kucacisiwe ngasentla.

Iindlela

Iindlela ze-Asynchronous kunye notshintsho

Zonke iindlela ze-API zi -asynchronous kwaye ziqala utshintsho . Babuyela kumnxeba ngokukhawuleza nje ukuba utshintsho luqalisiwe kodwa ngaphambi kokuba luphele . Ukongeza, ukufowunelwa kwendlela kwicandelo lenguquko kuya kuhoywa .

Jonga uxwebhu lwethu lweJavaScript ngolwazi olungakumbi .

$().tooltip(options)

Iqhoboshela isibambi sesixhobo kwingqokelela yesiqalelo.

.tooltip('show')

Ityhila inqaku lesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo iboniswe (okt phambi kokuba shown.bs.tooltipisiganeko senzeke). Oku kuthathwa ngokuba "yimanyuwali" yokuqalisa inqaku lesixhobo. Iingcebiso zezixhobo ezinezihloko ezibude buziro aziboniswa.

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

.tooltip('hide')

Ifihla incam yesixhobo. Ibuyisela kumnxeba phambi kokuba incam yesixhobo ifihliwe (okt phambi kokuba hidden.bs.tooltipisiganeko senzeke). Oku kuthathwa ngokuba "yimanyuwali" yokuqalisa inqaku lesixhobo.

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

.tooltip('toggle')

Itshintshela incam yesixhobo. Ibuyisela kumnxebi phambi kokuba incam yesixhobo iboniswe okanye ifihlwe (okt phambi kokuba isiganeko shown.bs.tooltipokanye hidden.bs.tooltipisiganeko 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 kwizinto ezibangela 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 showkubizwa 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 hideindlela yomzekelo ibiziwe.
ingcebiso.bs.isixhobo esifihliweyo Esi siganeko siyagxothwa xa icebo lesixhobo ligqityiwe ukufihlwa kumsebenzisi (liya kulinda uguqulo lweCSS lugqibe).
ingcebiso.bs.isixhobo Esi siganeko sigxothwa emva show.bs.tooltipkwesiganeko xa ithemplate ye-tooltip yongezwa kwi-DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})