Switsundzuxo swa Switirhisiwa
Matsalwa na swikombiso swo engetela switsundzuxo swa switirhisiwa swa Bootstrap swa ntolovelo hi CSS na JavaScript hi ku tirhisa CSS3 eka swifaniso leswi hanyaka na data-bs-attributes ya vuhlayiselo bya swihloko swa laha kaya.
Nkatsakanyo
Swilo leswi u faneleke u swi tiva loko u tirhisa xiengetelo xa xitirhisiwa:
- Switirhisiwa swi titshege hi layiburari ya 3rd party Popper eka xiyimo. U fanele ku katsa popper.min.js emahlweni ka bootstrap.js kumbe u tirhisa
bootstrap.bundle.min.js
/bootstrap.bundle.js
leyi nga na Popper leswaku switsundzuxo swa switirhisiwa swi tirha! - Switsundzuxo swa switirhisiwa i ku hlawula ku nghena hikwalaho ka swivangelo swa matirhelo, hikwalaho u fanele ku swi sungula hi wexe .
- Switsundzuxo swa switirhisiwa leswi nga ni swihloko swa ku leha ka zero a swi si tshama swi kombisiwa.
- Boxa
container: 'body'
ku papalata swiphiqo swa ku hundzuluxela eka swiphemu leswi rharhanganeke swinene (ku fana na mintlawa ya hina ya ku nghenisa, mintlawa ya swikomba-nkarhi, na swin’wana). - Ku hlohlotela switsundzuxo eka swiaki leswi fihliweke a swi nge tirhi.
- Switsundzuxo swa switirhisiwa swa
.disabled
kumbedisabled
swiaki swi fanele ku pfuriwa eka elemente ya xifunengeto. - Loko yi pfuriwa ku suka eka ti-hyperlink leti hlanganisaka milayeni yo tala, switsundzuxo swa switirhisiwa swi ta va swi ri exikarhi. Tirhisa
white-space: nowrap;
eka s ya wena<a>
ku papalata mahanyelo lawa. - Switsundzuxo swa switirhisiwa swi fanele ku fihliwa swiaki swa swona leswi fambelanaka swi nga si susiwa eka DOM.
- Switirhisiwa swi nga pfuriwa hi ku khensa elemente endzeni ka DOM ya ndzhuti.
prefers-reduced-motion
xivutiso xa midiya. Vona
xiyenge xa ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .
Xana u na swona hinkwaswo sweswo? Great, a hi voneni ndlela leyi va tirhaka ha yona hi swikombiso swin’wana.
Xikombiso: Endla leswaku switsundzuxo swa switirhisiwa swi tirha hinkwako-nkwako
Ndlela yin’wana yo sungula switsundzuxo hinkwaswo swa switirhisiwa eka tluka ku nga va ku swi hlawula hi ku ya hi data-bs-toggle
mfanelo ya swona:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Swikombiso
Hover ehenhla ka swihlanganisi leswi nga laha hansi ku vona switsundzuxo swa switirhisiwa:
Tsalwa ra xikhomela-ndhawu ku kombisa swihlanganisi swin’wana swa le ndzeni ka layini hi switsundzuxo swa switirhisiwa. Leswi sweswi i filler ntsena, ku hava mudlayi. Vuxokoxoko byi vekiwile laha ntsena ku tekelela vukona bya tsalwa ra xiviri . Naswona hinkwaswo sweswo ntsena ku ku nyika mianakanyo ya ndlela leyi switsundzuxo swa switirhisiwa swi nga langutekaka ha yona loko swi tirhisiwa eka swiyimo swa xiviri. Kutani hi tshemba leswaku sweswi u vonile ndlela leyi switsundzuxo leswi eka swihlanganisi swi nga tirhaka ha yona hi ku tirhisa, loko se u swi tirhisa eka sayiti kumbe phurojeke ya wena .
Hover ehenhla ka swikomba-nkarhi leswi nga laha hansi leswaku u vona swiletelo swa mune swa switsundzuxo swa switirhisiwa: ehenhla, exineneni, ehansi ni le ximatsi. Swiletelo swi kombisiwa hi xivoni loko u tirhisa Bootstrap eka 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>
Naswona hi HTML ya ntolovelo leyi engeteriweke:
<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>
Hi SVG: .
Sass
Swilo leswi cinca-cincaka
$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;
Matirhiselo
Plugin ya xitsundzuxo xa switirhisiwa yi humesa nhundzu na ku fungha hi ku landza xilaveko, naswona hi ku tiyimisela yi veka switsundzuxo endzhaku ka elemente ya swona ya xihlohloteri.
Pfuxeta xitsundzuxo xa xitirhisiwa hi ku tirhisa JavaScript:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Ku tala ka mati auto
nascroll
Xiyimo xa xitirhisiwa xi ringeta ku cinca hi ku tisungulela loko xikhomela-ndhawu xa mutswari xi ri na overflow: auto
kumbe overflow: scroll
ku fana na xa hina .table-responsive
, kambe xa ha hlayisa xiyimo xa ndhawu yo sungula. Ku lulamisa leswi, veka boundary
nhlawulo (eka mucinci wa flip hi ku tirhisa popperConfig
nhlawulo) eka HTMLElement yihi na yihi ku tlula ntikelo wa xiviri, 'clippingParents'
, ku fana na document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Ku fungha swilo
Ximaki lexi lavekaka xa xitsundzuxo xa xitirhisiwa i data
xihlawulekisi ntsena naswona title
eka elemente ya HTML u navela ku va na xitsundzuxo xa xitirhisiwa. Ku fungha loku endliweke ka xitsundzuxo xa xitirhisiwa ku olovile swinene, hambi leswi ku lavaka xiyimo (hi ku tiyimisela, ku vekiwile eka top
hi xiengetelo).
Ku endla leswaku switsundzuxo swi tirha eka vatirhisi va khibhodi na thekinoloji yo pfuneta
U fanele ku engetela ntsena switsundzuxo swa switirhisiwa eka swiaki swa HTML leswi hi ntolovelo swi kongomisiweke eka khibhodi na ku tirhisana (ku fana na swihlanganisi kumbe vulawuri bya fomo). Hambileswi swiaki swa HTML swa ku tihlawulela (swo tanihi <span>
s) swi nga endliwaka swi kongomisiwa hi ku engetela tabindex="0"
xihlawulekisi, leswi swi ta engetela ku yima ka tithebhu loku nga ha hlundzukisaka ni ku pfilunganya eka swiaki leswi nga riki swa vuhlanganisi eka vatirhisi va khibhodi, naswona thekinoloji yo tala leyi pfunaka sweswi a yi tivisi xitsundzuxo xa xitirhisiwa eka xiyimo lexi. Ku engetela kwalaho, u nga titshegi ntsena hi hover
tanihi xihlohloteri xa xitsundzuxo xa wena xa switirhisiwa, tanihi leswi leswi swi nga ta endla leswaku switsundzuxo swa wena swi nga koteki ku swi hlohlotela eka vatirhisi va khibhodi.
<!-- 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>
Swiaki leswi lamaleke
Swiaki leswi nga na disabled
xihlawulekisi a swi tirhisani, leswi vulaka leswaku vatirhisi a va nge swi koti ku kongomisa, ku hover, kumbe ku swi tsindziyela ku pfuxa xitirhisiwa (kumbe popover). Tanihi ndlela yo tshungula, u ta lava ku pfuxa xitsundzuxo xa xitirhisiwa ku suka eka xifunengeto <div>
kumbe <span>
, hi ndlela leyinene yi endliwe leswaku yi kongomisiwa eka khibhodi hi ku tirhisa 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>
Swihlawulekisi
Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-bs-
, tanihi le ka data-bs-animation=""
. Tiyisisa leswaku u cinca muxaka wa xiyimo xa vito ra xihlawulekisi ku suka eka camelCase ku ya eka kebab-case loko u hundzisa swihlawulekisi hi ku tirhisa swihlawulekisi swa data. Hi xikombiso, ematshan’weni yo tirhisa data-bs-customClass="beautifier"
, tirhisa data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, na
allowList
swihlawulekisi a swi nge nyikiwi hi ku tirhisa swihlawulekisi swa data.
Vito | Muxaka | Ku tlula | Nhlamuselo |
---|---|---|---|
animation |
xitsonga xitsonga | true |
Tirhisa ku cinca ka ku fada ka CSS eka xitsundzuxo xa xitirhisiwa |
container |
ntambhu ya xirhendzevutani | xiaki xa | vunwa | false |
Ku engetela xitsundzuxo xa xitirhisiwa eka elemente yo karhi. Xikombiso: |
delay |
nomboro | nchumu | 0 |
Ku hlwela ku kombisa na ku tumbeta xitsundzuxo xa xitirhisiwa (ms) - a swi tirhi eka muxaka wa xihlohloteri xa manual Loko nomboro yi nyikiwile, ku hlwela ku tirhisiwa eka havumbirhi bya ku fihla/kombisa Xivumbeko xa nchumu i: |
html |
xitsonga xitsonga | false |
Pfumelela HTML eka xitsundzuxo xa switirhisiwa. Loko ku ri ntiyiso, tithegi ta HTML eka tooltip's Tirhisa tsalwa loko u vilerisiwa hi nhlaselo wa XSS. |
placement |
ntambhu ya xirhendzevutani | ntirho | 'top' |
Ndlela yo veka xitirhisiwa - auto | ehenhla | ehansi | ximatsi | mfanelo. Loko ntirho wu tirhisiwa ku kumisisa ku vekiwa, wu vitaniwa hi tooltip DOM node tanihi argument ya wona yo sungula na triggering element DOM node tanihi ya vumbirhi. Mongo |
selector |
ntambhu ya xirhendzevutani | vunwa | false |
Loko ku nyikiwile xihlawulekisi, swilo swa xitsundzuxo xa switirhisiwa swi ta nyikiwa swikongomelo leswi boxiweke. Hi ku tirhisa, leswi swi tirhisiwa ku tlhela swi tirhisa switsundzuxo swa switirhisiwa eka swiaki swa DOM leswi engeteriweke hi ndlela leyi cinca-cincaka ( jQuery.on nseketelo). Vona leswi ni xikombiso lexi dyondzisaka . |
template |
ntambu | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Base HTML ku tirhisa loko u endla xitirhisiwa. Ti tooltip's
Xiphemu xa le handle xa xifunengeto xi fanele ku va na |
title |
ntambhu ya xirhendzevutani | xiaki xa | ntirho | '' |
Nhlayo ya xihloko xa xiviri loko Loko ntirho wu nyikiwile, wu ta vitaniwa hi |
trigger |
ntambu | 'hover focus' |
Ndlela leyi tooltip yi pfuriwaka ha yona - click | hover | ku kongomisa | manyuwali. U nga ha hundza swihlohloteri swo tala; va hambanise hi xivandla.
|
fallbackPlacements |
array ya xirhendzevutani | ['top', 'right', 'bottom', 'left'] |
Hlamusela swivandla swa fallback hi ku nyika nxaxamelo wa swivandla eka array (hi ku landzelelana ka ku tsakela). Ku kuma vuxokoxoko byo tala languta eka Popper's behavior docs |
boundary |
ntambhu ya xirhendzevutani | nchumu | 'clippingParents' |
Ndzilakano wa xipimelo xa ku khuluka wa xitsundzuxo xa xitirhisiwa (wu tirha ntsena eka mucinci wa Popper wa preventOverflow). Hi ku tiyimisela i 'clippingParents' naswona yi nga amukela xikombo xa HTMLElement (hi ku tirhisa JavaScript ntsena). Ku kuma vuxokoxoko byo tala languta eka Popper's detectOverflow docs . |
customClass |
ntambhu ya xirhendzevutani | ntirho | '' |
Engetela titlilasi eka xitsundzuxo xa switirhisiwa loko xi kombisiwa. Xiya leswaku titlilasi leti ti ta engeteriwa ku engetela eka titlilasi tihi na tihi leti boxiweke eka xifaniso. Ku engetela titlilasi to tala, ti hambanise hi swivandla: U nga ha tlhela u hundzisela ntirho lowu faneleke ku vuyisa ntambhu yin’we leyi nga na mavito ya titlilasi yo engetela. |
sanitize |
xitsonga xitsonga | true |
Endla leswaku ku tirhisiwa kumbe ku tshikisa ku basisiwa. Loko yi tirhisiwa 'template' na 'title' ti options ti ta sanitized. Vona xiyenge xa sanitizer eka matsalwa ya hina ya JavaScript . |
allowList |
nchumu | Nhlayo ya xiviri | Nchumu lowu nga na swihlawulekisi leswi pfumeleriweke na tithegi |
sanitizeFn |
null | ntirho | null |
Laha unga phakela ntirho wa wena wa sanitize. Leswi swinga pfuna loko u tsakela ku tirhisa layiburari leyi tinyiketeleke ku endla ku basisiwa. |
offset |
xirhendzevutani | ntambhu ya xirhendzevutani | ntirho | [0, 0] |
Ku hambanisiwa ka xitsundzuxo xa xitirhisiwa loko xi pimanisiwa na xikongomelo xa xona. U nga hundza ntambhu eka swihlawulekisi swa datha hi mimpimo leyi hambanisiweke hi khoma ku fana na: Loko ntirho wu tirhisiwa ku kumisisa offset, wu vitaniwa hi nchumu lowu nga na popper placement, reference, na popper rects tani hi argument ya wona yo sungula. Node ya DOM ya elemente leyi hlohlotelaka yi hundziseriwa tanihi argument ya vumbirhi. Ntirho wu fanele ku vuyisa array leyi nga na tinomboro timbirhi: . Ku kuma vuxokoxoko byo tala languta eka Popper's offset docs . |
popperConfig |
null | nchumu | ntirho | null |
Ku cinca xivumbeko xa Popper xa xiviri xa Bootstrap, vona xivumbeko xa Popper . Loko ntirho wu tirhisiwa ku tumbuluxa xivumbeko xa Popper, wu vitaniwa hi nchumu lowu nga na xivumbeko xa Popper xa xiviri xa Bootstrap. Swi ku pfuna ku tirhisa ni ku hlanganisa leswi nga riki swa xiviri ni xivumbeko xa wena. Ntirho wu fanele ku vuyisa nchumu wa vuhlanganisi bya Popper. |
Swihlawulekisi swa datha swa switsundzuxo swa switirhisiwa swa munhu hi xiyexe
Swihlawulekisi swa switsundzuxo swa switirhisiwa swa munhu hi xiyexe swi nga boxiwile hi ndlela yin’wana hi ku tirhisa swihlawulekisi swa datha, tanihilaha swi hlamuseriweke hakona laha henhla.
Ku tirhisa ntirho napopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Maendlelo
Maendlelo ya asynchronous na ku cinca
Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .
Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala .
kombisa
Ku paluxa xitsundzuxo xa xitirhisiwa xa elemente. Ku tlhelela eka mufoyini xitsundzuxo xa xitirhisiwa xi nga si kombisiwa hakunene (i.e. shown.bs.tooltip
xiendlakalo xi nga si humelela). Leswi swi tekiwa tanihi ku pfuxa “manual” ka xitsundzuxo xa xitirhisiwa. Switsundzuxo swa switirhisiwa leswi nga ni swihloko swa ku leha ka zero a swi si tshama swi kombisiwa.
tooltip.show()
tumbela
Ku fihla xitsundzuxo xa xitirhisiwa xa elemente. Ku tlhelela eka mufoyini xitsundzuxo xa xitirhisiwa xi nga si fihliwa hakunene (i.e. hidden.bs.tooltip
xiendlakalo xi nga si humelela). Leswi swi tekiwa tanihi ku pfuxa “manual” ka xitsundzuxo xa xitirhisiwa.
tooltip.hide()
ku cinca-cinca
Ku cinca-cinca xitsundzuxo xa xitirhisiwa xa elemente. Ku tlhelela eka mufoyini xitsundzuxo xa xitirhisiwa xi nga si kombisiwa hakunene kumbe ku fihliwa (i.e. emahlweni ka ku humelela shown.bs.tooltip
kumbe hidden.bs.tooltip
xiendlakalo). Leswi swi tekiwa tanihi ku pfuxa “manual” ka xitsundzuxo xa xitirhisiwa.
tooltip.toggle()
lahla
Ku tumbeta no herisa xitirhisiwa xa elemente (Ku susa data leyi hlayisiweke eka elemente ya DOM). Switirhisiwa leswi tirhisaka ku rhumeriwa (leswi endliwaka hi ku tirhisa selector
nhlawulo ) a swi nge herisiwi hi swoxe eka swiaki swa xihlohloteri swa vatukulu.
tooltip.dispose()
koteka
Yi nyika xitirhisiwa xa elemente vuswikoti byo kombisiwa. Switsundzuxo swa switirhisiwa swi tirhisiwa hi ku tiyimisela.
tooltip.enable()
vulamari
Ku susa vuswikoti bya xitirhisiwa xa elemente ku kombisiwa. Xitsundzuxo xa switirhisiwa xi ta kota ku kombisiwa ntsena loko xi pfuriwile nakambe.
tooltip.disable()
toggleYi pfuriwile
Ku cinca vuswikoti bya xitirhisiwa xa elemente ku kombisiwa kumbe ku fihliwa.
tooltip.toggleEnabled()
pfuxeta
Ku pfuxeta xiyimo xa xitsundzuxo xa xitirhisiwa xa elemente.
tooltip.update()
getXikombiso
Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa tooltip lexi fambelanaka na elemente ya DOM
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
kumaKumbeEndlaXikombiso
Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa tooltip lexi fambelanaka na elemente ya DOM, kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Swiendlakalo
Muxaka wa xiendlakalo | Nhlamuselo |
---|---|
show.bs.tooltip |
Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku show vitaniwa ndlela ya xikombiso. |
shown.bs.tooltip |
Xiendlakalo lexi xi duvuriwa loko xitsundzuxo xa xitirhisiwa xi endliwile xi vonaka eka mutirhisi (xi ta rindza ku cinca ka CSS ku hela). |
hide.bs.tooltip |
Xiendlakalo lexi xi duvuriwa hi ku hatlisa loko ndlela ya hide xikombiso yi vitaniwile. |
hidden.bs.tooltip |
Xiendlakalo lexi xi duvuriwa loko xitsundzuxo xa xitirhisiwa xi hetile ku tumbetiwa eka mutirhisi (xi ta rindza ku cinca ka CSS ku hela). |
inserted.bs.tooltip |
Xiendlakalo lexi xi hlongoriwa endzhaku ka show.bs.tooltip xiendlakalo loko xifaniso xa xitirhisiwa xi engeteriwile eka DOM. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()