Source

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.

Yfirlit

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.jssem inniheldur Popper.js til að verkfæraábendingar virki!
  • Ef þú ert að byggja JavaScript okkar frá uppruna, krefstutil.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 .disabledeða disabledþæ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.
  • Hægt er að kveikja á verkfærum þökk sé frumefni inni í skugga DOM.

Hreyfiáhrif þessa íhluts eru háð prefers-reduced-motionmiðlunarfyrirspurninni. Sjá kaflann um minni hreyfingu í aðgengisskjölunum okkar .

Áttu allt það? Frábært, við skulum sjá hvernig þeir virka með nokkrum dæmum.

Dæmi: Virkjaðu verkfæraábendingar alls staðar

Ein leið til að frumstilla allar verkfæraábendingar á síðu væri að velja þær eftir data-toggleeiginleikum þeirra:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Dæmi

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.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Og með sérsniðnum HTML bætt við:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Notkun

The tooltip tappi býr til efni og álagningu á eftirspurn og setur sjálfgefið verkfæraábendingar á eftir kveikjuhlutanum.

Kveiktu á tóli í gegnum JavaScript:

$('#example').tooltip(options)
Yfirfall autoogscroll

Staðsetning ábendinga reynir að breytast sjálfkrafa þegar foreldri ílát hefur overflow: autoeða overflow: scrolllíkar við okkar .table-responsive, en heldur samt staðsetningu upprunalegu staðsetningunnar. Til að leysa, stilltu boundaryvalkostinn á allt annað en sjálfgefið gildi, 'scrollParent', eins og 'window':

$('#example').tooltip({ boundary: 'window' })

Markup

Nauðsynleg merking fyrir verkfæraleiðbeiningar er aðeins dataeiginleiki 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 á topaf viðbótinni).

Gera 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 tenglum eða formstýringum). Þrátt fyrir að hægt sé að gera handahófskennda HTML þætti (eins og <span>s) fókusanlega með því að bæta tabindex="0"eigindinni við, mun þetta bæta við hugsanlega pirrandi og ruglingslegum flipastoppum á ógagnvirka þætti fyrir lyklaborðsnotendur, og flestar hjálpartækni tilkynnir ekki um verkfæraábendingu í þessum aðstæðum. Að auki skaltu ekki treysta eingöngu á hoverkveikjuna fyrir tólaábendingar þínar, þar sem þetta mun gera tólaábendingar þínar ómögulegar fyrir lyklaborðsnotendur.

<!-- HTML to write -->
<a href="#" data-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="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Óvirkir þættir

Þættir með disabledeigindinni 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>

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-animation="".

Athugaðu að af öryggisástæðum er ekki hægt að útvega sanitize, sanitizeFnog whiteListvalkostina með því að nota gagnaeiginleika.

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: container: 'body'. Þessi valkostur er sérstaklega gagnlegur þar sem hann gerir þér kleift að staðsetja tólaskýringuna í flæði skjalsins nálægt kveikjueiningunni - sem kemur í veg fyrir að tólábendingin svífi í burtu frá kveikjueiningunni meðan á stærð gluggans stendur.
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:delay: { "show": 500, "hide": 100 }
html Boolean rangt

Leyfa HTML í tóli.

Ef satt, verða HTML merki í tólabendingunni titlebirt í tólabendingunni. Ef það er rangt verður textaðferð jQuery notuð til að setja efni inn í DOM.

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 autoþað er tilgreint mun það breyta tólabendingunni á virkan há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útinn sem seinni. Samhengið thiser stillt á tooltip tilvikið.
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ð nota verkfæraábendingar til að bæta við DOM þætti ( jQuery.onstuðningur). 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 tólið.

Verkfæraráðinu titleverður sprautað inn í .tooltip-inner.

.arrowverður ör á tóli.

Ysta umbúðaþátturinn ætti að hafa .tooltipflokkinn og role="tooltip".
titill strengur | þáttur | virka ''

Sjálfgefið titilgildi ef titleeigind er ekki til staðar.

Ef fall er gefið upp verður það kallað með thistilvísuninni stillt á þáttinn sem tólið er tengt við.
kveikja strengur 'sveima fókus'

Hvernig ábending er sett af stað - smelltu á | sveima | fókus | handbók. Þú gætir farið framhjá mörgum kveikjum; aðskilja þá með bili.

'manual'gefur til kynna að ábendingin verði sett af stað forritunarlega með .tooltip('show'), .tooltip('hide')og .tooltip('toggle')aðferðunum; ekki er hægt að sameina þetta gildi við neina aðra kveikju.

'hover'ein og sér mun leiða til verkfæraábendinga sem ekki er hægt að kveikja á með lyklaborðinu og ætti aðeins að nota ef aðrar aðferðir eru til staðar til að miðla sömu upplýsingum fyrir lyklaborðsnotendur.
á móti númer | strengur | virka 0

Offsetja á tóli miðað við markmið hennar.

Þegar fall er notað til að ákvarða offsetið er það kallað með hlut sem inniheldur offset gögnin sem fyrstu rök. Fallið verður að skila hlut með sömu uppbyggingu. Kveikjuþátturinn DOM hnútur er samþykktur sem önnur rök.

Frekari 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 .
sótthreinsa Boolean satt Virkja eða slökkva á hreinsun. Ef virkjað 'template'og 'title'valkostir verða sótthreinsaðir.
hvítlisti mótmæla Sjálfgefið gildi Hlutur sem inniheldur leyfilega eiginleika og merki
hreinsaFn núll | virka núll Hér getur þú útvegað þína eigin sótthreinsunaraðgerð. Þetta getur verið gagnlegt ef þú vilt frekar nota sérstakt bókasafn til að framkvæma hreinsun.
popperConfig núll | mótmæla núll Til að breyta sjálfgefna Popper.js stillingu Bootstrap, sjáðu stillingar 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.

Aðferðir

Ó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ð .

Sjá JavaScript skjölin okkar fyrir frekari upplýsingar .

$().tooltip(options)

Festir verkfæraleiðbeiningar við einingarsafn.

.tooltip('show')

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.tooltipatburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni. Verkfæraleiðbeiningar með núll-lengd titlum birtast aldrei.

$('#element').tooltip('show')

.tooltip('hide')

Felur ábendingu frumefnis. Snýr aftur til þess sem hringir áður en verkfæraráðið hefur verið falið (þ.e. áður en hidden.bs.tooltipatburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni.

$('#element').tooltip('hide')

.tooltip('toggle')

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.tooltipeða hidden.bs.tooltipá sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni.

$('#element').tooltip('toggle')

.tooltip('dispose')

Felur og eyðileggur verkfæraá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.

$('#element').tooltip('dispose')

.tooltip('enable')

Gefur verkfæri frumefnis möguleika á að vera sýndur. Verkfæraleiðbeiningar eru sjálfgefnar virkar.

$('#element').tooltip('enable')

.tooltip('disable')

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.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

Skiptir um möguleikann á því að sýna eða fela verkfæraleiðbeiningar þáttar.

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Uppfærir staðsetningu ábendinga frumefnis.

$('#element').tooltip('update')

Viðburðir

Tegund viðburðar Lýsing
sýna.bs.tól Þessi atburður ræsir strax þegar showtilviksaðferðin er kölluð.
sýnd.bs.verkfæri Þ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 hidetilviksað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.tooltipatburðinn þegar sniðmát fyrir verkfæraleiðbeiningar hefur verið bætt við DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})