Verkfæraráð
Skjöl og dæmi til að bæta við sérsniðnum Bootstrap verkfæraleiðbeiningum með CSS og JavaScript með því að nota CSS3 fyrir hreyfimyndir og gagnaeiginleika fyrir staðbundna titlageymslu.
Hlutir sem þarf að vita þegar þú notar tooltip viðbótina:
- Verkfæraráð treysta á þriðja aðila bókasafnið Popper.js fyrir staðsetningu. Þú verður að hafa popper.min.js fyrir bootstrap.js eða nota
bootstrap.bundle.min.js
/bootstrap.bundle.js
sem inniheldur Popper.js til að verkfæraábendingar virki! - Ef þú ert að byggja JavaScript okkar frá uppruna, krefst
util.js
það . - Verkfæraráð eru valin af frammistöðuástæðum, svo þú verður að frumstilla þær sjálfur .
- Verkfæraleiðbeiningar með núlllengdar titlum birtast aldrei.
- Tilgreindu
container: 'body'
til að forðast að skila vandamálum í flóknari íhlutum (eins og inntakshópum okkar, hnappahópum osfrv.). - Það virkar ekki að kveikja á ábendingum um falda þætti.
- Verkfæraleiðbeiningar fyrir
.disabled
eðadisabled
þætti verða að vera virkjaðar á umbúðaeiningu. - Þegar kveikt er á tenglum sem spanna margar línur verða verkfæraábendingar miðaðar. Notaðu
white-space: nowrap;
á þinn<a>
s til að forðast þessa hegðun. - Ábendingar verða að vera falin áður en samsvarandi þættir þeirra hafa verið fjarlægðir úr DOM.
Áttu allt það? Frábært, við skulum sjá hvernig þeir virka með nokkrum dæmum.
Ein leið til að frumstilla allar verkfæraábendingar á síðu væri að velja þær eftir data-toggle
eiginleikum þeirra:
Farðu yfir tenglana hér að neðan til að sjá verkfæraleiðbeiningar:
Þröngar buxur næsta stig keffiyeh þú hefur líklega ekki heyrt um þær. Ljósmyndabás skegg hrár denim bókprentun vegan senditaska stumptown. Seitan frá bænum til borðs, mcsweeney's fixie sjálfbær quinoa 8 bita amerískur fatnaður er með terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu lífdísill Williamsburg Marfa, fjögurra loko mcsweeney's cleanse vegan chambray. Virkilega kaldhæðnislegur handverksmaður hvað sem er keytar , scenester bæ-til-borð banksy Austin twitter höndla freegan cred raw denim einuppruna kaffi veiru.
Færðu bendilinn yfir hnappana hér að neðan til að sjá fjórar leiðbeiningar á tólum: efst, hægri, neðst og til vinstri.
Og með sérsniðnu HTML bætt við:
The tooltip tappi býr til efni og álagningu á eftirspurn og setur sjálfgefið verkfæraábendingar á eftir kveikjuhlutanum.
Kveiktu á tóli í gegnum JavaScript:
Nauðsynleg merking fyrir verkfæraleiðbeiningar er aðeins data
eiginleiki og title
á HTML-einingunni viltu hafa verkfæraleiðbeiningar. Mynduð merking tækjaráðs er frekar einföld, þó hún krefjist stöðu (sjálfgefið, stillt á top
af viðbótinni).
Gerir verkfæraábendingar virka fyrir notendur lyklaborðs og hjálpartækja
Þú ættir aðeins að bæta tólaábendingum við HTML þætti sem venjulega eru með lyklaborðsfókus og gagnvirkir (eins og tenglar eða formstýringar). Þó að hægt sé að gera handahófskennda HTML þætti (eins og <span>
s) fókusanlega með því að bæta við tabindex="0"
eigindinni, mun þetta bæta við hugsanlega pirrandi og ruglingslegum flipastoppum á ógagnvirka þætti fyrir lyklaborðsnotendur. Að auki tilkynna flestar hjálpartækni nú ekki um tólið í þessum aðstæðum.
Að auki skaltu ekki treysta eingöngu á hover
kveikjuna fyrir tólaábendingar þínar, þar sem þetta mun gera tólaábendingar þínar ómögulegar fyrir lyklaborðsnotendur.
Þættir með disabled
eigindinni eru ekki gagnvirkir, sem þýðir að notendur geta ekki einbeitt sér, sveiflað eða smellt á þá til að kalla fram verkfæraábendingu (eða sprettiglugga). Sem lausn, þú vilt kveikja á tóli frá umbúðum <div>
eða <span>
, helst gert lyklaborðsfókus með því að nota tabindex="0"
, og hnekkja pointer-events
á óvirka þættinum.
<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>
Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-
, eins og í data-animation=""
.
Nafn | Tegund | Sjálfgefið | Lýsing |
---|---|---|---|
fjör | Boolean | satt | Notaðu CSS fade umskipti á tólabendinguna |
ílát | strengur | þáttur | rangt | rangt | Bætir ábendingunni við ákveðinn þátt. Dæmi: |
seinkun | númer | mótmæla | 0 | Seinkun á að sýna og fela verkfæraábendingu (ms) - á ekki við um handvirka kveikjugerð Ef númer er gefið upp er seinkun beitt á bæði fela/sýna Uppbygging hlutar er: |
html | Boolean | rangt | Leyfa HTML í tóli. Ef satt er, verða HTML merki í tólabendingunni Notaðu texta ef þú hefur áhyggjur af XSS árásum. |
staðsetningu | strengur | virka | 'topp' | Hvernig á að staðsetja tólið - sjálfvirkt | efst | botn | vinstri | rétt. Þegar fall er notað til að ákvarða staðsetninguna er það kallað með tooltip DOM hnútnum sem fyrstu röksemd og kveikjuþáttinn DOM hnút sem seinni. Samhengið |
veljara | strengur | rangt | rangt | Ef valkostur er til staðar verður verkfæravísahlutum úthlutað til tilgreindra skotmarka. Í reynd er þetta notað til að gera kviku HTML efni kleift að bæta við sprettigluggum. Sjá þetta og fróðlegt dæmi . |
sniðmát | strengur | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Grunn HTML til að nota þegar þú býrð til verkfæraábendingu. Verkfæraráðinu
Ysta umbúðaþátturinn ætti að hafa |
titill | strengur | þáttur | virka | '' | Sjálfgefið titilgildi ef Ef fall er gefið upp verður það kallað með |
kveikja | strengur | 'sveima fókus' | Hvernig tólábending er kveikt - smelltu á | sveima | fókus | handbók. Þú gætir farið framhjá mörgum kveikjum; aðskilja þá með bili.
|
á móti | númer | strengur | 0 | Offseting á tóli miðað við markmið hans. Nánari upplýsingar er að finna í offset skjölum Popper.js . |
fallbackStaðsetning | strengur | fylki | 'flipa' | Leyfa að tilgreina hvaða stöðu Popper mun nota á fallback. Nánari upplýsingar er að finna í hegðunarskjölum Popper.js |
mörk | strengur | þáttur | 'scrollParent' | Yfirfallsþvingunarmörk tækjaráðsins. Samþykkir gildin 'viewport' , 'window' , 'scrollParent' , eða HTMLElement tilvísun (aðeins JavaScript). Nánari upplýsingar er að finna í preventOverflow skjölum Popper.js . |
Gagnaeiginleikar fyrir einstakar verkfæraábendingar
Að öðrum kosti er hægt að tilgreina valkosti fyrir einstakar verkfæraábendingar með því að nota gagnaeiginleika, eins og útskýrt er hér að ofan.
Ósamstilltar aðferðir og umskipti
Allar API aðferðir eru ósamstilltar og hefja umskipti . Þeir snúa aftur til þess sem hringir um leið og umskiptin eru hafin en áður en þeim lýkur . Að auki verður aðferðakall á umbreytingarhluta hunsað .
Hengir verkfæraleiðbeiningum við einingarsafn.
Sýnir verkfæraábendingu frumefnis. Snýr aftur til þess sem hringir áður en verkfæraráðið hefur verið sýnt (þ.e. áður en shown.bs.tooltip
atburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni. Verkfæraleiðbeiningar með núlllengdar titlum birtast aldrei.
Felur ábendingu frumefnis. Snýr aftur til þess sem hringir áður en verkfæraráðið hefur verið falið (þ.e. áður en hidden.bs.tooltip
atburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni.
Breytir ábendingum frumefnis. Snýr aftur til þess sem hringir áður en verkfæraábendingin hefur verið sýnd eða falin (þ.e. áður en atburðurinn shown.bs.tooltip
eða hidden.bs.tooltip
á sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni.
Felur og eyðileggur ábendingu frumefnis. Verkfæraábendingar sem nota úthlutun (sem eru búnar til með valmöguleikanum selector
) er ekki hægt að eyða fyrir sig á afkvæma kveikjuþáttum.
Gefur verkfæri frumefnis möguleika á að vera sýndur. Verkfæraleiðbeiningar eru sjálfgefnar virkar.
Fjarlægir möguleikann á að sýna ábendingu frumefnis. Aðeins er hægt að sýna verkfæraráðið ef það er virkjað aftur.
Skiptir um möguleikann á því að sýna eða fela verkfæraleiðbeiningar þáttar.
Uppfærir staðsetningu ábendinga frumefnis.
Tegund atburðar | Lýsing |
---|---|
sýna.bs.tól | Þessi atburður ræsir strax þegar show tilviksaðferðin er kölluð. |
sýnd.bs.tákn | Þessi atburður er ræstur þegar verkfæraráðið hefur verið gert sýnilegt notandanum (bíður eftir að CSS umbreytingum ljúki). |
fela.bs.tól | Þessi atburður er ræstur strax þegar hide tilviksaðferðin hefur verið kölluð. |
falinn.bs.verkfæraráð | Þetta tilvik er ræst þegar tólaábendingin hefur lokið við að vera falin fyrir notandanum (bíður eftir að CSS umbreytingum ljúki). |
sett inn.bs.tól | Þessi atburður er ræstur eftir show.bs.tooltip atburðinn þegar sniðmát fyrir verkfæraleiðbeiningar hefur verið bætt við DOM. |