Molaidhean innealan
Sgrìobhainnean agus eisimpleirean airson molaidhean inneal Bootstrap àbhaisteach a chuir ris le CSS agus JavaScript a’ cleachdadh CSS3 airson beòthachaidhean agus buadhan dàta-bs airson stòradh tiotal ionadail.
Ro-shealladh
Rudan air am bu chòir fios a bhith agad nuair a chleachdas tu am plugan Tooltip:
- Tha molaidhean innealan an urra ris an leabharlann treas pàrtaidh Popper airson a shuidheachadh. Feumaidh tu popper.min.js a thoirt a-steach ro bootstrap.js no cleachdadh
bootstrap.bundle.min.js
/bootstrap.bundle.js
anns a bheil Popper gus an obraich molaidhean innealan! - Tha molaidhean innealan roghnach a-steach airson adhbharan dèanadais, mar sin feumaidh tu iad fhèin a thòiseachadh .
- Chan eil molaidhean innealan le tiotalan fad neoni air an taisbeanadh gu bràth.
- Sònraich
container: 'body'
gus duilgheadasan tairgse a sheachnadh ann am pàirtean nas iom-fhillte (mar na buidhnean cuir a-steach againn, buidhnean putan, msaa). - Chan obraich molaidhean innealan brosnachaidh air eileamaidean falaichte.
- Feumaidh molaidhean airson
.disabled
nodisabled
eileamaidean a bhith air am piobrachadh air eileamaid còmhdaich. - Nuair a thèid a bhrosnachadh bho hyperlinks a tha a’ dol thairis air grunn loidhnichean, bidh molaidhean innealan stèidhichte. Cleachd
white-space: nowrap;
air do chuid<a>
gus an giùlan seo a sheachnadh. - Feumaidh molaidhean innealan a bhith falaichte mus tèid na h-eileamaidean co-fhreagarrach aca a thoirt air falbh bhon DOM.
- Faodar molaidhean innealan a bhrosnachadh le taing do eileamaid taobh a-staigh sgàil DOM.
prefers-reduced-motion
ceist nam meadhanan. Faic an
earrann gluasad lùghdaichte de na sgrìobhainnean ruigsinneachd againn .
Fhuair sin uile? Sgoinneil, chì sinn mar a tha iad ag obair le eisimpleirean.
Eisimpleir: Dèan comas air molaidhean innealan anns a h-uile àite
Is e aon dòigh air a h-uile comhairle inneal air duilleag a thòiseachadh a bhith gan taghadh a rèir am data-bs-toggle
feart:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Eisimpleirean
Gabh thairis air na ceanglaichean gu h-ìosal gus molaidhean innealan fhaicinn:
Teacs neach-àite gus cuid de cheanglaichean in -loidhne le molaidhean innealan a nochdadh. Chan eil ann an seo a-nis ach lìonadh, gun neach-marbhadh. Susbaint air a chuir an seo dìreach airson atharrais air làthaireachd teacsa fìor . Agus sin uile dìreach airson beachd a thoirt dhut air mar a bhiodh molaidhean innealan a’ coimhead nuair a bhiodh iad gan cleachdadh ann an suidheachaidhean fìor. Mar sin tha mi an dòchas gu bheil thu a-nis air faicinn mar a dh’ obraicheas na molaidhean innealan seo air ceanglaichean , aon uair ‘s gun cleachd thu iad air an làrach no am pròiseact agad fhèin .
Gabh thairis air na putanan gu h-ìosal gus na ceithir stiùiridhean innealan fhaicinn: mullach, deas, bonn, agus clì. Tha stiùiridhean air an nochdadh nuair a bhios tu a’ cleachdadh Bootstrap ann an 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>
Agus le HTML àbhaisteach air a chur ris:
<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>
Le SVG:
Sass
Caochlaidhean
$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;
Cleachdadh
Bidh am plugan Tooltip a’ gineadh susbaint agus comharrachadh a rèir iarrtas, agus gu bunaiteach a’ cur molaidhean innealan às deidh an eileamaid brosnachaidh aca.
Cuir a-steach an inneal tro JavaScript:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Overflow auto
agusscroll
Bidh suidheachadh Tooltip a’ feuchainn ri atharrachadh gu fèin-ghluasadach nuair a tha no mar an tè againn aig soitheach pàrant , ach a chumas e fhathast suidheachadh an t-suidheachaidh thùsail. Gus seo fhuasgladh, suidhich an roghainn (airson an inneal flip a’ cleachdadh an roghainn) gu HTMLElement sam bith gus faighinn thairis air an luach bunaiteach, , leithid :overflow: auto
overflow: scroll
.table-responsive
boundary
popperConfig
'clippingParents'
document.body
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Marcaich
Chan eil anns a’ chomharradh a tha a dhìth airson inneal-toisich ach data
feart agus title
air an eileamaid HTML a tha thu ag iarraidh tip inneal. Tha an comharrachadh gineadh de chomhairle inneal caran sìmplidh, ged a tha feum air suidheachadh (gu gnàthach, air a shuidheachadh top
leis a’ plugan).
A’ toirt air molaidhean innealan obrachadh dha luchd-cleachdaidh meur-chlàr agus teicneòlas cuideachail
Cha bu chòir dhut ach molaidhean innealan a chur ri eileamaidean HTML a tha gu traidiseanta ag amas air meur-chlàr agus eadar-ghnìomhach (leithid ceanglaichean no smachdan foirm). Ged a dh’ fhaodar fòcas a chuir air eileamaidean HTML neo-riaghailteach (leithid <span>
s) le bhith a’ cur a’ bhuadh ris tabindex="0"
, cuiridh seo stadan taba a dh’ fhaodadh a bhith neònach agus troimh-chèile air eileamaidean neo-eadar-ghnìomhach airson luchd-cleachdaidh meur-chlàr, agus chan eil a’ mhòr-chuid de theicneòlasan cuideachaidh an-dràsta ag ainmeachadh a’ chomhairle san t-suidheachadh seo. A bharrachd air an sin, na bi an eisimeil a-mhàin hover
mar inneal brosnachaidh do chomhairle, oir nì seo na molaidhean innealan agad do-dhèanta do luchd-cleachdaidh meur-chlàr.
<!-- 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>
Eileamaidean ciorramach
Chan eil eileamaidean leis a’ disabled
fheart eadar-ghnìomhach, a’ ciallachadh nach urrainn do luchd-cleachdaidh fòcas a chuir orra, gluasad thairis no briogadh orra gus inneal-inneal (no popover) a bhrosnachadh. Mar dhòigh-obrach, bidh thu airson an inneal a bhrosnachadh bho phasgan <div>
no <span>
, air a dhèanamh le fòcas meur-chlàr le bhith a’ cleachdadh 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>
Roghainnean
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-bs-
, mar ann an data-bs-animation=""
. Dèan cinnteach gun atharraich thu an seòrsa cùis den ainm roghainn bho camelCase gu kebab-case nuair a thèid thu seachad air na roghainnean tro bhuadhan dàta. Mar eisimpleir, an àite a bhith a’ cleachdadh data-bs-customClass="beautifier"
, cleachd data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, agus
allowList
roghainnean a thoirt seachad a’ cleachdadh buadhan dàta.
Ainm | Seòrsa | Deònach | Tuairisgeul |
---|---|---|---|
animation |
boolean | true |
Cuir a-steach eadar-ghluasad sgàineadh CSS chun a’ phìos inneal |
container |
sreang | eileamaid | breugach | false |
A’ ceangal a’ bhileag-taice ri eileamaid shònraichte. Eisimpleir: |
delay |
àireamh | nì | 0 |
Dàil a’ sealltainn agus a’ falach an t-inneal (ms) - chan eil sin a’ buntainn ri seòrsa brosnachaidh làimhe Ma thèid àireamh a thoirt seachad, thèid dàil a chuir air an dà sheiche / taisbeanadh Tha structar an nì: |
html |
boolean | false |
Leig le HTML anns a' ghoireas. Ma tha e fìor, thèid tagaichean HTML anns na h-innealan-taice Cleachd teacsa ma tha dragh ort mu ionnsaighean XSS. |
placement |
sreang | gnìomh | 'top' |
Mar a shuidhicheas tu an t-inneal - auto | mullach | bun | clì | deas. Nuair a thèid gnìomh a chleachdadh gus an suidheachadh a dhearbhadh, canar ris an inneal inneal DOM mar a’ chiad argamaid aige agus an eileamaid brosnachaidh nód DOM mar an dàrna fear. Tha an co- |
selector |
sreang | breugach | false |
Ma thèid neach-taghaidh a thoirt seachad, thèid nithean tip inneal a thiomnadh gu na targaidean ainmichte. jQuery.on Ann an cleachdadh, tha seo air a chleachdadh gus molaidhean innealan a chuir an sàs ann an eileamaidean DOM ( taic) a tha air an cur ris gu dinamach . Faic seo agus eisimpleir fiosrachail . |
template |
sreang | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Bunait HTML ri chleachdadh nuair a chruthaicheas tu an t-inneal. Thèid na molaidhean innealan
Bu chòir gum biodh an |
title |
sreang | eileamaid | gnìomh | '' |
Luach an tiotail bunaiteach mura h Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- |
trigger |
sreang | 'hover focus' |
Mar a tha tooltip air a phiobrachadh - cliog | seachain | fòcas | làimhe. Faodaidh tu a dhol seachad air ioma-tharraing; dealachadh riu le àite.
|
fallbackPlacements |
eagar | ['top', 'right', 'bottom', 'left'] |
Mìnich greisean gnìomhachais le bhith a’ toirt seachad liosta de dh’àiteachan ann an òrdugh (ann an òrdugh roghainn). Airson tuilleadh fiosrachaidh thoir sùil air docaichean giùlan Popper |
boundary |
sreang | eileamaid | 'clippingParents' |
Crìoch cuibhreachaidh thar-shruth den phìos inneal (a ’buntainn a-mhàin ri inneal-atharrachaidh preventOverflow Popper). Gu gnàthach tha e 'clippingParents' agus gabhaidh e ri iomradh HTMLElement (tro JavaScript a-mhàin). Airson tuilleadh fiosrachaidh thoir sùil air na docaichean detectOverflow aig Popper . |
customClass |
sreang | gnìomh | '' |
Cuir clasaichean ris a’ phìos inneal nuair a thèid a shealltainn. Thoir an aire gun tèid na clasaichean sin a chur ris a bharrachd air clasaichean sam bith a tha air an sònrachadh san teamplaid. Gus grunn chlasaichean a chur ris, dealaich iad le beàrnan: Faodaidh tu cuideachd gnìomh a thoirt seachad a bu chòir aon sreang a thilleadh anns a bheil ainmean clas a bharrachd. |
sanitize |
boolean | true |
Dèan comas no cuir à comas an slàinteachas. Ma thèid a ghnìomhachadh 'template' agus 'title' thèid roghainnean a ghlanadh. Faic an roinn sanitizer anns na sgrìobhainnean JavaScript againn . |
allowList |
nì | Luach bunaiteach | Rud anns a bheil buadhan agus tagaichean ceadaichte |
sanitizeFn |
null | gnìomh | null |
An seo faodaidh tu an gnìomh slàintealachd agad fhèin a thoirt seachad. Faodaidh seo a bhith feumail mas fheàrr leat leabharlann sònraichte a chleachdadh airson slàinteachas a dhèanamh. |
offset |
eagar | sreang | gnìomh | [0, 0] |
Cuir dheth a’ ghoireas inneal an coimeas ris an targaid aige. Faodaidh tu sreang a thoirt seachad ann am buadhan dàta le luachan sgaraichte le cromag mar: Nuair a thèid gnìomh a chleachdadh gus an co-chothromachadh a dhearbhadh, canar le nì anns a bheil suidheachadh popper, an iomradh, agus popper a’ chiad argamaid aige. Tha an eileamaid brosnachaidh DOM air a thoirt seachad mar an dàrna argamaid. Feumaidh an gnìomh sreath a thilleadh le dà àireamh: . Airson tuilleadh fiosrachaidh thoir sùil air na docaichean dheth Popper . |
popperConfig |
null | nì | gnìomh | null |
Gus an rèiteachadh Popper bunaiteach aig Bootstrap atharrachadh, faic rèiteachadh Popper . Nuair a thèid gnìomh a chleachdadh gus an rèiteachadh Popper a chruthachadh, tha e air a ghairm le nì anns a bheil an rèiteachadh Popper bunaiteach aig Bootstrap. Cuidichidh e thu le bhith a’ cleachdadh agus a’ ceangal a’ bhunait leis an rèiteachadh agad fhèin. Feumaidh an gnìomh rud rèiteachaidh a thilleadh airson Popper. |
Feartan dàta airson molaidhean innealan fa leth
Faodar roghainnean airson molaidhean innealan fa leth a shònrachadh tro bhith a’ cleachdadh buadhan dàta, mar a chaidh a mhìneachadh gu h-àrd.
A 'cleachdadh gnìomh lepopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Dòighean-obrach
Modhan asyncronach agus eadar-ghluasadan
Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .
Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .
seall
A 'nochdadh comhairle inneal eileamaid. Tillidh e chun neach-fios mus deach an inneal a shealltainn (ie mus tachair an shown.bs.tooltip
tachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làimhe” den t-inneal. Chan eil molaidhean innealan le tiotalan fad neoni air an taisbeanadh gu bràth.
tooltip.show()
seiche
A 'falach comhairle inneal eileamaid. Tilleadh chun neach-fios mus deach an inneal fhalach (ie mus tachair an hidden.bs.tooltip
tachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den t-inneal.
tooltip.hide()
tog
Toglaidh comhairle inneal eileamaid. Tillidh e chun neach-fios mus deach an inneal a shealltainn no fhalach (ie mus tachair an tachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den t-inneal.shown.bs.tooltip
hidden.bs.tooltip
tooltip.toggle()
cuidhteas
A’ falach agus a’ sgrios inneal-inneal eileamaid (A’ toirt air falbh dàta air a stòradh air an eileamaid DOM). Chan urrainnear molaidhean innealan a chleachdas tiomnadh (a thèid a chruthachadh leis an selector
roghainn ) a sgrios leotha fhèin air eileamaidean brosnachaidh sliochd.
tooltip.dispose()
comas a thoirt
A’ toirt comas do chomhairle inneal eileamaid a bhith air a shealltainn. Tha molaidhean innealan air an comasachadh gu bunaiteach.
tooltip.enable()
chur à comas
A’ toirt air falbh comas inneal-inneal eileamaid a shealltainn. Cha bhith e comasach an t-inneal-toisich a shealltainn ach ma tha e air ath-chomasachadh.
tooltip.disable()
toggleEnable
Togaidh seo comas inneal eileamaid a shealltainn no fhalach.
tooltip.toggleEnabled()
ùrachadh
Ag ùrachadh suidheachadh comhairle inneal eileamaid.
tooltip.update()
faighinn a-mach
Modh statach a leigeas leat an t-eisimpleir tooltip fhaighinn co-cheangailte ri eileamaid DOM
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
faighOrCreateInstance
Dòigh statach a leigeas leat an t-eisimpleir tooltip fhaighinn co-cheangailte ri eileamaid DOM, no fear ùr a chruthachadh gun fhios nach deach a thòiseachadh
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Tachartasan
Seòrsa tachartas | Tuairisgeul |
---|---|
show.bs.tooltip |
Bidh an tachartas seo a’ losgadh sa bhad nuair show a chanar ris an dòigh eisimpleir. |
shown.bs.tooltip |
Thèid an tachartas seo a chuir às nuair a bhios an inneal ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). |
hide.bs.tooltip |
Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hide dòigh eisimpleir a ghairm. |
hidden.bs.tooltip |
Thèid an tachartas seo a losgadh nuair a tha an inneal deiseil air a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). |
inserted.bs.tooltip |
Thèid an tachartas seo a losgadh às deidh an show.bs.tooltip tachartais nuair a chaidh an teamplaid tooltip a chuir ris an DOM. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()