Source

Namigi orodij

Dokumentacija in primeri za dodajanje namigov orodij Bootstrap po meri s CSS in JavaScript z uporabo CSS3 za animacije in podatkovne atribute za lokalno shranjevanje naslovov.

Pregled

Stvari, ki jih morate vedeti pri uporabi vtičnika orodnih namigov:

  • Namigi orodij se za pozicioniranje zanašajo na knjižnico tretjih oseb Popper.js . Pred bootstrap.js morate vključiti popper.min.js ali uporabiti bootstrap.bundle.min.js/ bootstrap.bundle.js, ki vsebuje Popper.js, da bodo opisi orodij delovali!
  • Če gradite naš JavaScript iz izvorne kode, zahtevautil.js .
  • Namigi orodij so zaradi učinkovitosti izbirni, zato jih morate inicializirati sami .
  • Namigi z naslovi ničelne dolžine niso nikoli prikazani.
  • Določite container: 'body', da se izognete težavam z upodabljanjem v kompleksnejših komponentah (kot so naše vnosne skupine, skupine gumbov itd.).
  • Sprožitev namigov orodij na skritih elementih ne bo delovala.
  • Nasveti za .disabledali disabledelemente se morajo sprožiti na ovojnem elementu.
  • Ko se sprožijo iz hiperpovezav, ki zajemajo več vrstic, bodo namigi orodij na sredini. Uporabite white-space: nowrap;na svojem <a>s, da se izognete temu vedenju.
  • Namigi orodij morajo biti skriti, preden so njihovi ustrezni elementi odstranjeni iz DOM-a.
  • Namigi orodij se lahko sprožijo zaradi elementa znotraj senčnega DOM-a.

Učinek animacije te komponente je odvisen od prefers-reduced-motionmedijske poizvedbe. Oglejte si razdelek o zmanjšanem gibanju v naši dokumentaciji o dostopnosti .

Vse to razumeš? Super, poglejmo, kako delujejo z nekaj primeri.

Primer: povsod omogočite opise orodij

Eden od načinov inicializacije vseh namigov orodij na strani bi bil, da jih izberete po njihovem data-toggleatributu:

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

Primeri

Premaknite miškin kazalec nad spodnje povezave, da si ogledate opise orodij:

Ozke hlače naslednje stopnje keffiyeh , za katere verjetno še niste slišali. Photo booth beard raw denim letterpress veganska kurirska torba stumptown. Seitan od kmetije do mize, 8-bitna ameriška oblačila mcsweeney's fixie trajnostna kvinoja imajo vinil chambray terryja richardsona. Beard stumptown, kardigani banh mi lomo thundercats. Tofu biodizel williamsburg marfa, štiri loko mcsweeney's cleanse veganski chambray. Resnično ironični rokodelec , karkoli keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin kava virusna.

Premaknite miškin kazalec nad spodnje gumbe, da vidite štiri smeri orodnih namigov: zgoraj, desno, spodaj in levo.

<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>

In z dodanim HTML-jem po meri:

<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>

Uporaba

Vtičnik orodnih namigov ustvari vsebino in oznake na zahtevo ter privzeto postavi namige orodij za njihov sprožilni element.

Sproži opis orodja prek JavaScripta:

$('#example').tooltip(options)
Preliv autoinscroll

Položaj namiga orodja se poskuša samodejno spremeniti, ko ima nadrejeni vsebnik overflow: autoali overflow: scrollkot naš .table-responsive, vendar še vedno ohranja položaj prvotne umestitve. Za rešitev nastavite boundarymožnost na kar koli drugega kot privzeto vrednost, 'scrollParent'na primer 'window':

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

Markup

Zahtevana oznaka za opis orodja je le dataatribut in titlena elementu HTML, za katerega želite, da je opis orodja. Ustvarjena oznaka orodnega opisa je precej preprosta, čeprav zahteva položaj (privzeto nastavljen tops strani vtičnika).

Omogočanje uporabe namigov orodij za uporabnike tipkovnice in podporne tehnologije

Dodate le namige orodij elementom HTML, na katere se tradicionalno lahko osredotoči tipkovnica in so interaktivni (kot so povezave ali kontrolniki obrazcev). Čeprav lahko poljubne elemente HTML (kot <span>je s) omogočite fokusiranje z dodajanjem tabindex="0"atributa, bo to dodalo potencialno nadležne in zmedene tabulatorske postanke na neinteraktivnih elementih za uporabnike tipkovnice, večina podpornih tehnologij pa trenutno ne objavi namiga orodja v tej situaciji. Poleg tega se ne zanašajte samo na hoversprožilec za svoj opis orodja, saj bo tako uporabnikom tipkovnice nemogoče sprožiti vaše nasvete.

<!-- 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>

Onemogočeni elementi

Elementi z disabledatributom niso interaktivni, kar pomeni, da jih uporabniki ne morejo izostriti, premakniti z miško ali klikniti, da bi sprožili opis orodja (ali pojavni pojav). Kot nadomestno rešitev boste želeli sprožiti opis orodja iz ovoja <div>ali <span>, v idealnem primeru narejenega za fokusiranje s tipkovnico z uporabo tabindex="0", in preglasiti pointer-eventsna onemogočenem elementu.

<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>

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-animation="".

Upoštevajte, da iz varnostnih razlogov možnosti sanitize, sanitizeFnin whiteListni mogoče zagotoviti z uporabo podatkovnih atributov.

Ime Vrsta Privzeto Opis
animacija logično prav Na opisu orodja uporabite bledeči prehod CSS
posoda niz | element | lažno lažno

Doda namig orodja določenemu elementu. Primer: container: 'body'. Ta možnost je še posebej uporabna, ker vam omogoča, da namig orodja postavite v tok dokumenta blizu sprožilnega elementa – kar bo preprečilo, da bi namig orodja med spreminjanjem velikosti okna lebdel stran od sprožilnega elementa.
zamuda številka | predmet 0

Zakasnitev prikaza in skrivanja namiga orodja (ms) – ne velja za tip ročnega proženja

Če je navedena številka, se zakasnitev uporabi za skrij/prikaži

Struktura objekta je:delay: { "show": 500, "hide": 100 }
html logično lažno

Dovoli HTML v opisu orodja.

Če je res, bodo oznake HTML v opisu orodja titleupodobljene v opisu orodja. Če je nastavljeno na false, textbo za vstavljanje vsebine v DOM uporabljena metoda jQuery.

Če vas skrbijo napadi XSS, uporabite besedilo.
umestitev niz | funkcijo 'top'

Kako postaviti opis orodja - samodejno | vrh | dno | levo | prav.
Ko autoje naveden, bo dinamično preusmeril opis orodja.

Ko se funkcija uporabi za določitev umestitve, se pokliče z vozliščem DOM z opisom orodja kot prvim argumentom in vozliščem prožilnega elementa DOM kot drugim. Kontekst thisje nastavljen na primer orodnega opisa.
selektor niz | lažno lažno Če je na voljo izbirnik, bodo predmeti namigov orodja dodeljeni navedenim ciljem. V praksi se to uporablja tudi za uporabo namigov orodij za dinamično dodane elemente DOM ( jQuery.onpodpora). Oglejte si to in informativen primer .
predlogo vrvica '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Osnovni HTML za uporabo pri ustvarjanju opisa orodja.

Namigi orodij titlebodo vstavljeni v .tooltip-inner.

.arrowbo postala puščica opisa orodja.

Zunanji ovojni element mora imeti .tooltiprazred in role="tooltip".
naslov niz | element | funkcijo ''

Privzeta vrednost naslova, če titleatribut ni prisoten.

Če je podana funkcija, bo klicana s thissklicem, nastavljenim na element, na katerega je pritrjen opis orodja.
sprožilec vrvica 'hover focus'

Kako se sproži opis orodja - kliknite | lebdi | fokus | priročnik. Lahko prenesete več sprožilcev; ločite jih s presledkom.

'manual'označuje, da se bo opis orodja sprožil programsko prek metod in .tooltip('show'); te vrednosti ni mogoče kombinirati z nobenim drugim sprožilcem..tooltip('hide').tooltip('toggle')

'hover'samo po sebi bo povzročilo namige orodij, ki jih ni mogoče sprožiti prek tipkovnice, in jih je treba uporabiti samo, če so prisotne alternativne metode za posredovanje istih informacij uporabnikom tipkovnice.
odmik številka | niz | funkcijo 0

Odmik namiga orodja glede na cilj.

Ko se funkcija uporablja za določanje odmika, se pokliče z objektom, ki vsebuje podatke o odmiku kot prvi argument. Funkcija mora vrniti objekt z enako strukturo. Vozlišče sprožilnega elementa DOM je posredovano kot drugi argument.

Za več informacij si oglejte dokumente o odmiku Popper.js .
rezervna umestitev niz | niz 'flip' Dovolite, da določite, kateri položaj bo Popper uporabil pri nadomestni uporabi. Za več informacij glejte dokumente o obnašanju Popper.js
meja niz | element 'scrollParent' Meja omejitve prelivanja namiga orodja. Sprejema vrednosti 'viewport', 'window', 'scrollParent'ali sklic HTMLElement (samo JavaScript). Za več informacij glejte dokumentacijo PrevenOverflow za Popper.js .
razkužiti logično prav Omogočite ali onemogočite čiščenje. Če je aktivirano 'template', 'title'bodo možnosti razčiščene.
beli seznam predmet Privzeta vrednost Objekt, ki vsebuje dovoljene atribute in oznake
sanitizeFn nič | funkcijo nič Tukaj lahko zagotovite lastno funkcijo razkuževanja. To je lahko uporabno, če za izvajanje sanacije raje uporabljate namensko knjižnico.
popperConfig nič | predmet nič Če želite spremeniti privzeto konfiguracijo Popper.js Bootstrapa, glejte konfiguracijo Popper.js

Atributi podatkov za posamezne namige orodij

Možnosti za posamezne namige orodij je mogoče določiti tudi z uporabo atributov podatkov, kot je razloženo zgoraj.

Metode

Asinhrone metode in prehodi

Vse metode API so asinhrone in začnejo prehod . K klicatelju se vrnejo takoj, ko se prehod začne, vendar preden se konča . Poleg tega bo prezrt klic metode prehodne komponente .

Za več informacij si oglejte našo dokumentacijo JavaScript .

$().tooltip(options)

Zbirki elementov priloži obravnavo namigov orodij.

.tooltip('show')

Razkrije namig elementa. Vrne se klicatelju, preden se dejansko prikaže opis orodja (tj. preden shown.bs.tooltippride do dogodka). To velja za »ročno« proženje namiga orodja. Namigi z naslovi ničelne dolžine niso nikoli prikazani.

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

.tooltip('hide')

Skrije namig elementa. Vrne se klicatelju, preden je bil opis orodja dejansko skrit (tj. preden se hidden.bs.tooltipzgodi dogodek). To velja za »ročno« proženje namiga orodja.

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

.tooltip('toggle')

Preklopi opis orodja elementa. Vrne se klicatelju, preden je bil opis orodja dejansko prikazan ali skrit (tj. preden pride do dogodka shown.bs.tooltipali ). hidden.bs.tooltipTo velja za »ročno« proženje namiga orodja.

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

.tooltip('dispose')

Skrije in uniči namig elementa. Namigov orodij, ki uporabljajo delegiranje (ki so ustvarjeni z možnostjo selector) , ni mogoče posamično uničiti na podrejenih sprožilnih elementih.

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

.tooltip('enable')

Omogoči prikaz orodnega namig elementa. Namigi orodij so privzeto omogočeni.

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

.tooltip('disable')

Odstrani možnost prikaza namiga elementa. Namig orodja bo lahko prikazan samo, če bo znova omogočen.

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

.tooltip('toggleEnabled')

Preklopi zmožnost prikaza ali skritja opisa orodja elementa.

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

.tooltip('update')

Posodobi položaj opisa orodja elementa.

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

Dogodki

Vrsta dogodka Opis
show.bs.tooltip Ta dogodek se sproži takoj, ko showse pokliče metoda primerka.
prikazano.bs.tooltip Ta dogodek se sproži, ko je opis orodja viden uporabniku (počakal bo, da se zaključijo prehodi CSS).
hide.bs.tooltip Ta dogodek se sproži takoj, ko hideje bila poklicana metoda primerka.
hidden.bs.tooltip Ta dogodek se sproži, ko opis orodja ni več skrit pred uporabnikom (počakal bo, da se zaključijo prehodi CSS).
inserted.bs.tooltip Ta dogodek se sproži po show.bs.tooltipdogodku, ko je predloga orodja dodana v DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})