Cynghorion offer
Dogfennaeth ac enghreifftiau ar gyfer ychwanegu awgrymiadau cymorth Bootstrap wedi'u teilwra gyda CSS a JavaScript gan ddefnyddio CSS3 ar gyfer animeiddiadau a phriodoleddau data ar gyfer storio teitlau lleol.
Pethau i'w gwybod wrth ddefnyddio'r ategyn cyngor:
- Mae cynghorion offer yn dibynnu ar y llyfrgell 3ydd parti Popper.js ar gyfer lleoli. Mae'n rhaid i chi gynnwys popper.min.js cyn bootstrap.js neu use
bootstrap.bundle.min.js
/bootstrap.bundle.js
sy'n cynnwys Popper.js er mwyn i tooltips weithio! - Os ydych chi'n adeiladu ein JavaScript o'r ffynhonnell, mae angen
util.js
. - Mae awgrymiadau offer yn optio i mewn am resymau perfformiad, felly mae'n rhaid i chi eu cychwyn eich hun .
- Nid yw awgrymiadau offer gyda theitlau hyd sero byth yn cael eu harddangos.
- Nodwch
container: 'body'
er mwyn osgoi problemau rendro mewn cydrannau mwy cymhleth (fel ein grwpiau mewnbwn, grwpiau botwm, ac ati). - Ni fydd ysgogi awgrymiadau offer ar elfennau cudd yn gweithio.
- Rhaid ysgogi awgrymiadau offer ar gyfer
.disabled
neudisabled
elfennau ar elfen lapio. - Pan gânt eu hysgogi gan hyperddolenni sy'n ymestyn dros linellau lluosog, bydd cynghorion offer yn cael eu canoli. Defnyddiwch
white-space: nowrap;
ar eich<a>
s i osgoi'r ymddygiad hwn. - Rhaid cuddio awgrymiadau offer cyn i'w helfennau cyfatebol gael eu tynnu o'r DOM.
Wedi cael hynny i gyd? Gwych, gadewch i ni weld sut maen nhw'n gweithio gyda rhai enghreifftiau.
Un ffordd o gychwyn pob cyngor offer ar dudalen fyddai eu dewis yn ôl eu data-toggle
priodoledd:
Hofran dros y dolenni isod i weld awgrymiadau offer:
Pants dynn lefel nesaf keffiyeh mae'n debyg nad ydych wedi clywed amdanynt. Photo bwth barf llythrenwasg denim amrwd bag negeseuwr fegan stumptown. Mae gan seitan fferm-i-bwrdd, dillad quinoa cynaliadwy mcsweeney quinoa 8-bit Americanaidd siambr finyl terry richardson. Barf stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, pedwar loko mcsweeney's cleanse vegan chambray. Mae crefftwr eironig iawn beth bynnag keytar , scenester fferm-i-bwrdd Banky Austin twitter trin freegan cred amrwd denim un-tarddiad feirol coffi.
Hofran dros y botymau isod i weld y pedwar cyfarwyddyd cyngor offer: top, dde, gwaelod, a chwith.
A chyda HTML personol wedi'i ychwanegu:
Mae'r ategyn tooltip yn cynhyrchu cynnwys a marcio yn ôl y galw, ac yn ddiofyn yn gosod awgrymiadau offer ar ôl eu helfen sbarduno.
Sbardunwch y cyngor trwy JavaScript:
Priodoledd yn unig yw'r marcio gofynnol ar gyfer cyngor offer data
ac title
ar yr elfen HTML rydych chi'n dymuno cael cyngor. Mae'r marcio a gynhyrchir o gyngor offer braidd yn syml, er bod angen safle (yn ddiofyn, wedi'i osod top
gan yr ategyn).
Gwneud i awgrymiadau cymorth weithio ar gyfer defnyddwyr bysellfwrdd a thechnoleg gynorthwyol
Dim ond elfennau HTML sy'n draddodiadol yn canolbwyntio ar fysellfyrddau ac yn rhyngweithiol y dylech eu hychwanegu (fel dolenni neu reolaethau ffurf). <span>
Er y gellir gwneud elfennau HTML mympwyol (fel s) yn ffocws trwy ychwanegu'r tabindex="0"
priodoledd, bydd hyn yn ychwanegu stopiau tab a allai fod yn annifyr ac yn ddryslyd ar elfennau nad ydynt yn rhyngweithiol ar gyfer defnyddwyr bysellfwrdd. Yn ogystal, nid yw'r rhan fwyaf o dechnolegau cynorthwyol ar hyn o bryd yn cyhoeddi'r cyngor yn y sefyllfa hon.
Yn ogystal, peidiwch â dibynnu'n llwyr arno hover
fel sbardun ar gyfer eich cyngor, gan y bydd hyn yn gwneud eich cynghorion offer yn amhosibl eu sbarduno i ddefnyddwyr bysellfwrdd.
Nid yw elfennau gyda'r disabled
priodoledd yn rhyngweithiol, sy'n golygu na all defnyddwyr ganolbwyntio, hofran na chlicio arnynt i sbarduno cyngor (neu popover). Fel ateb i'r broblem, byddwch chi eisiau sbarduno'r cyngor offer o ddeunydd lapio <div>
neu <span>
, sy'n ddelfrydol wedi'i wneud â ffocws bysellfwrdd gan ddefnyddio tabindex="0"
, a diystyru'r pointer-events
elfen ar yr anabl.
<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>
Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-
, fel yn data-animation=""
.
Enw | Math | Diofyn | Disgrifiad |
---|---|---|---|
animeiddiad | boolaidd | gwir | Cymhwyso trawsnewidiad pylu CSS i'r cyngor |
cynhwysydd | llinyn | elfen | ffug | ffug | Yn atodi'r cyngor i elfen benodol. Enghraifft: |
oedi | rhif | gwrthrych | 0 | Oedi wrth ddangos a chuddio'r cyngor (ms) - nid yw'n berthnasol i'r math o sbardun â llaw Os bydd rhif yn cael ei gyflenwi, bydd oedi yn cael ei gymhwyso i'r ddwy guddfan/sioe Strwythur gwrthrych yw: |
html | boolaidd | ffug | Caniatáu HTML yn y cyngor. Os yn wir, bydd tagiau HTML yn y cyngor yn Defnyddiwch destun os ydych chi'n poeni am ymosodiadau XSS. |
lleoliad | llinyn | swyddogaeth | 'top' | Sut i leoli'r cyngor - auto | brig | gwaelod | chwith | iawn. Pan ddefnyddir swyddogaeth i benderfynu ar y lleoliad, fe'i gelwir gyda'r nod DOM cyngor offer fel ei ddadl gyntaf a'r elfen sbarduno nod DOM fel ei ail. Mae'r |
detholwr | llinyn | ffug | ffug | Os darperir dewisydd, bydd gwrthrychau cyngor offer yn cael eu dirprwyo i'r targedau penodedig. Yn ymarferol, defnyddir hwn i alluogi cynnwys HTML deinamig i ychwanegu popovers. Gweler hyn ac enghraifft llawn gwybodaeth . |
templed | llinyn | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Sylfaen HTML i'w ddefnyddio wrth greu'r cyngor. Bydd y cynghorion offer yn
Dylai'r elfen lapio allanol gynnwys y |
teitl | llinyn | elfen | swyddogaeth | '' | Gwerth teitl diofyn os Os rhoddir ffwythiant, fe'i gelwir gyda'i |
sbardun | llinyn | 'ffocws hofran' | Sut mae cyngor yn cael ei sbarduno - cliciwch | hofran | ffocws | llaw. Efallai y byddwch yn pasio sbardunau lluosog; eu gwahanu â gofod.
|
gwrthbwyso | rhif | llinyn | 0 | Gwrthbwyso'r cyngor mewn perthynas â'i darged. Am ragor o wybodaeth cyfeiriwch at ddogfennau gwrthbwyso Popper.js . |
Lleoliad wrth gefn | llinyn | arae | 'fflip' | Caniatewch i nodi pa safle y bydd Popper yn ei ddefnyddio wrth gefn. Am ragor o wybodaeth cyfeiriwch at ddogfennau ymddygiad Popper.js |
ffin | llinyn | elfen | 'Sgrolio Rhiant' | Ffin cyfyngiad gorlif y cyngor. Yn derbyn gwerthoedd 'viewport' , 'window' , 'scrollParent' , neu gyfeirnod HTMLElement (JavaScript yn unig). I gael rhagor o wybodaeth, cyfeiriwch at ddogfennau preventOverflow Popper.js . |
Priodoleddau data ar gyfer cynghorion offer unigol
Fel arall, gellir nodi opsiynau ar gyfer cynghorion offer unigol trwy ddefnyddio priodoleddau data, fel yr eglurir uchod.
Dulliau a thrawsnewidiadau anghydamserol
Mae pob dull API yn asyncronaidd ac yn dechrau cyfnod pontio . Maen nhw'n dychwelyd at y galwr cyn gynted ag y bydd y cyfnod pontio wedi dechrau ond cyn iddo ddod i ben . Yn ogystal, bydd galwad dull ar gydran trawsnewid yn cael ei anwybyddu .
Yn cysylltu triniwr cyngor offer wrth gasgliad elfennau.
Yn datgelu cyngor offer elfen. Yn dychwelyd at y galwr cyn i'r cyngor gael ei ddangos (hy cyn i'r shown.bs.tooltip
digwyddiad ddigwydd). Ystyrir hyn yn sbardun “â llaw” o'r cyngor. Nid yw awgrymiadau offer gyda theitlau hyd sero byth yn cael eu harddangos.
Yn cuddio cyngor offer elfen. Yn dychwelyd at y galwr cyn i'r cyngor gael ei guddio (hy cyn i'r hidden.bs.tooltip
digwyddiad ddigwydd). Ystyrir hyn yn sbardun “â llaw” o'r cyngor.
Toglo cyngor offer elfen. Yn dychwelyd i'r galwr cyn i'r cyngor gael ei ddangos neu ei guddioshown.bs.tooltip
( hy cyn i'r hidden.bs.tooltip
digwyddiad ddigwydd). Ystyrir hyn yn sbardun “â llaw” o'r cyngor.
Yn cuddio ac yn dinistrio cyngor offer elfen. Ni all awgrymiadau offer sy'n defnyddio dirprwyo (sy'n cael eu creu gan ddefnyddio'r opsiwnselector
) gael eu dinistrio'n unigol ar elfennau sbardun disgynnydd .
Yn rhoi'r gallu i gyngor offer elfen gael ei ddangos. Mae awgrymiadau offer yn cael eu galluogi yn ddiofyn.
Yn dileu'r gallu i ddangos cyngor offer elfen. Dim ond os caiff ei ail-alluogi y bydd modd dangos y cyngor.
Toglo'r gallu i awgrym offer elfen gael ei ddangos neu ei guddio.
Yn diweddaru lleoliad cyngor offer elfen.
Math o Ddigwyddiad | Disgrifiad |
---|---|
cyngor.bs | Mae'r digwyddiad hwn yn tanio ar unwaith pan show elwir y dull enghraifft. |
cyngor.bs | Mae'r digwyddiad hwn yn cael ei danio pan fydd y cyngor wedi'i wneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau). |
cyngor.cuddio.bs | Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hide dull enghraifft wedi'i alw. |
cyngor.bs.cudd | Mae'r digwyddiad hwn yn cael ei danio pan fydd y cyngor wedi gorffen cael ei guddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau). |
mewnosod.bs.tooltip | Mae'r digwyddiad hwn yn cael ei danio ar ôl y show.bs.tooltip digwyddiad pan fydd y templed cyngor wedi'i ychwanegu at y DOM. |