Amathuluzi
Amadokhumenti nezibonelo zokwengeza amathiphu e-Bootstrap ngokwezifiso nge-CSS ne-JavaScript kusetshenziswa i-CSS3 yokugqwayiza kanye nedatha-bs-izibaluli zokugcinwa kwesihloko sasendaweni.
Uhlolojikelele
Izinto okufanele uzazi uma usebenzisa i-plugin ithiphu yamathuluzi:
- Amathuluzi ancike kulabhulali ye- Popper 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! - Amathuluzi angena ngezizathu zokusebenza, ngakho-ke kuzomele uwaqalise ngokwakho .
- Amathuluzi anezihloko zobude obuyiziro 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 kukhishwe izici ezihambisanayo ku-DOM.
- Amathuluzi angacushwa 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-bs-toggle
:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
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. Izikhombisi-ndlela ziboniswa uma usebenzisa i-Bootstrap ku-RTL.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Futhi nge-HTML yangokwezifiso yengezwe:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Nge-SVG:
Sass
Okuguquguqukayo
$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $border-radius;
$tooltip-opacity: .9;
$tooltip-padding-y: $spacer * .25;
$tooltip-padding-x: $spacer * .5;
$tooltip-margin: 0;
$tooltip-arrow-width: .8rem;
$tooltip-arrow-height: .4rem;
$tooltip-arrow-color: $tooltip-bg;
Ukusetshenziswa
I-plugin yethulithiphu ikhiqiza okuqukethwe kanye nemakhaphu ngokufunwayo, futhi ngokuzenzakalelayo beka izeluleko zamathuluzi ngemva kwesici sokucupha.
Qalisa ithiphu yamathuluzi nge-JavaScript:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, 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 lokhu, setha boundary
inketho (ye-flip modifier usebenzisa popperConfig
inketho) kunoma iyiphi i-HTMLElement ukuze ukhiphe inani elizenzakalelayo, 'clippingParents'
, njengokuthi document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
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 ezisebenzayo (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 amathiphu akho amathuluzi angenzeki ukuba aqalise kubasebenzisi bekhibhodi.
<!-- HTML to write -->
<a href="#" data-bs-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="tooltip-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 kusisonga <div>
noma <span>
, kwenziwe kahle ukuthi kugxilwe kukhibhodi usebenzisa tabindex="0"
.
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
Izinketho
Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-bs-
, njengaku data-bs-animation=""
. Qiniseka ukuthi ushintsha uhlobo lwekesi legama lenketho ukusuka ku-camelCase ukuya ku-kebab-kesi lapho udlulisa izinketho ngezibaluli zedatha. Ngokwesibonelo, esikhundleni sokusebenzisa data-bs-customClass="beautifier"
, sebenzisa data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
,
allowList
nezinketho azikwazi ukunikezwa kusetshenziswa izibaluli zedatha.
Igama | Uhlobo | Okuzenzakalelayo | Incazelo |
---|---|---|---|
animation |
boolean | true |
Faka inguquko ye-CSS fade ethiphu yamathuluzi |
container |
umucu | into | amanga | false |
Yengeza ithiphu entweni ethile. Isibonelo: |
delay |
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 | false |
Vumela i-HTML ethiphu yamathuluzi. Uma kuyiqiniso, omaka be-HTML bathiphu Sebenzisa umbhalo uma ukhathazekile ngokuhlaselwa kwe-XSS. |
placement |
umucu | umsebenzi | 'top' |
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 |
selector |
umucu | amanga | false |
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 . |
template |
umucu | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Isisekelo se-HTML ongasisebenzisa lapho udala ithiphu yamathuluzi. I-tooltip
I-elementi yokugoqa engaphandle kufanele ibe |
title |
umucu | into | umsebenzi | '' |
Inani lesihloko elizenzakalelayo uma Uma umsebenzi unikiwe, uzobizwa |
trigger |
umucu | 'hover focus' |
Ithiphu yamathuluzi icushwa kanjani - chofoza | hamba | gxila | imanuwali. Ungadlula izibangeli eziningi; abahlukanise ngesikhala.
|
fallbackPlacements |
uhlu | ['top', 'right', 'bottom', 'left'] |
Chaza ukubekwa emuva ngokunikeza uhlu lokubekwa ngokulandelana (ngokulandelana kokuthandayo). Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti okuziphatha kaPopper |
boundary |
umucu | isici | 'clippingParents' |
Umkhawulo owumkhawulo wokuchichima wethiphu yamathuluzi (usebenza kuphela kusilungisi se-Popper's preventOverflow). Ngokuzenzakalelayo iyona 'clippingParents' futhi ingamukela ireferensi ye-HTMLElement (nge-JavaScript kuphela). Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti e-Popper's detectOverflow . |
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. |
sanitize |
boolean | true |
Nika amandla noma vala ukukhucululwa kwendle. Uma kucushiwe 'template' futhi 'title' izinketho zizohlanzwa. Bona ingxenye yesanitizer emibhalweni yethu ye-JavaScript . |
allowList |
into | Inani elizenzakalelayo | Into equkethe izibaluli namathegi avunyelwe |
sanitizeFn |
null | umsebenzi | null |
Lapha ungakwazi ukunikeza umsebenzi wakho we-sanitize. Lokhu kungaba wusizo uma ukhetha ukusebenzisa umtapo wolwazi ozinikele ukwenza ukukhucululwa kwendle. |
offset |
uhlu | umucu | umsebenzi | [0, 0] |
I-offset yethiphu yamathuluzi ngokuhlobene nokuhlosiwe kwayo. Ungadlulisa uchungechunge kuzibaluli zedatha ezinamavelu ahlukaniswe ngokhefana afana nalawa: Uma umsebenzi usetshenziselwa ukunquma i-offset, ubizwa ngento equkethe ukubekwa kwe-popper, ireferensi, kanye ne-popper rects njengempikiswano yayo yokuqala. Into eqalisayo inodi ye-DOM idluliswa njengempikiswano yesibili. Umsebenzi kufanele ubuyisele amalungu afanayo anezinombolo ezimbili: . Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti e-Popper's offset . |
popperConfig |
null | into | umsebenzi | null |
Ukuze uguqule ukucushwa kwe-Popper okuzenzakalelayo kwe-Bootstrap, bona ukucushwa kwe-Popper . Uma umsebenzi usetshenziselwa ukudala ukucushwa kwe-Popper, kubizwa ngento equkethe ukucushwa kwe-Popper okuzenzakalelayo kwe-Bootstrap. Ikusiza ukuthi usebenzise futhi uhlanganise okumisiwe nokucushwa kwakho. Umsebenzi kufanele ubuyisele into yokumisa ye-Popper. |
Izibaluli zedatha zamathiphu wamathuluzi angawodwana
Izinketho zamathiphu wamathuluzi ngamanye zingacaciswa ngokusebenzisa izibaluli zedatha, njengoba kuchazwe ngenhla.
Ukusebenzisa umsebenzi ngepopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Izindlela
Izindlela ze-Asynchronous kanye noshintsho
Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Abuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngaphezu kwalokho, ikholi yendlela engxenyeni yoshintsho izozitshwa .
Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .
umbukiso
Iveza ithulithiphu yento ethile. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi iboniswe (okungukuthi ngaphambi kokuthi shown.bs.tooltip
kwenzeke umcimbi). Lokhu kuthathwa njengokucupha "okuzenzela" kwethiphu yamathuluzi. Amathuluzi anezihloko zobude obuyiziro awaboniswa.
tooltip.show()
fihla
Ifihla ithiphu yento ethile. Ibuyela kofonayo ngaphambi kokuthi ithiphu yamathuluzi ifihlekile (okungukuthi ngaphambi kokuthi hidden.bs.tooltip
kwenzeke umcimbi). Lokhu kuthathwa njengokucupha "okuzenzela" kwethiphu yamathuluzi.
tooltip.hide()
guqula
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" kwethiphu yamathuluzi.
tooltip.toggle()
lahla
Ifihla futhi ibhubhise ithiphu ye-elementi (Isusa idatha egciniwe kusici se-DOM). Amathuluzi asebenzisa ukuthunyelwa (okudalwe kusetshenziswa inkethoselector
) awakwazi ukucekelwa phansi ngamanye ezintweni ezibangela inzalo .
tooltip.dispose()
vumela
Inikeza ithuluzi le-elementi ikhono lokuboniswa. Amathiphu amathuluzi anikwe amandla ngokuzenzakalela.
tooltip.enable()
khubaza
Isusa ikhono lethulithiphu yento ezoboniswa. Ithiphu yamathuluzi izokwazi ukuboniswa kuphela uma inikwe amandla kabusha.
tooltip.disable()
i-toggleVunyiwe
Iguqula ikhono lethulithiphu yento ukuthi iboniswe noma ifihlwe.
tooltip.toggleEnabled()
buyekeza
Ibuyekeza indawo yethulithiphu yento.
tooltip.update()
getInstance
Indlela emile ekuvumela ukuthi uthole isibonelo sethiphu yamathuluzi esihlotshaniswa nento ye-DOM
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
getOrCreateInstance
Indlela emile ekuvumela ukuthi uthole isibonelo sethiphu yamathuluzi esihlotshaniswa nento ye-DOM, noma udale entsha uma kwenzeka ingaqaliswanga.
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Imicimbi
Uhlobo lomcimbi | Incazelo |
---|---|
show.bs.tooltip |
Lo mcimbi uvutha ngokushesha lapho show indlela yesibonelo ibizwa. |
shown.bs.tooltip |
Lo mcimbi uyaxoshwa uma ithiphu yamathuluzi yenziwe yabonakala kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele). |
hide.bs.tooltip |
Lo mcimbi uxoshwa ngokushesha lapho hide indlela yesibonelo ibizwa. |
hidden.bs.tooltip |
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. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()