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 tretje osebe Popper . Morate vključiti popper.min.js pred bootstrap.js ali uporabiti
bootstrap.bundle.min.js
/bootstrap.bundle.js
, ki vsebuje Popper, da bodo namigi delovali! - Če gradite naš JavaScript iz izvorne kode, zahteva
util.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
.disabled
alidisabled
elemente 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.
prefers-reduced-motion
medijske 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-toggle
atributu:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Primeri
Premaknite miškin kazalec nad spodnje povezave, da si ogledate opise orodij:
Besedilo nadomestnega mesta za predstavitev nekaterih povezav v vrstici z opisi orodij. To je zdaj samo polnilo, ne morilec. Vsebina, ki je tukaj postavljena samo zato, da posnema prisotnost pravega besedila . In vse to samo zato, da bi vam dali predstavo o tem, kako bi bili videti namigi orodij, če bi jih uporabljali v resničnih situacijah. Upajmo, da ste zdaj videli, kako lahko ti opisi orodij na povezavah delujejo v praksi, ko jih enkrat uporabite na svojem spletnem mestu ali projektu.
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 auto
inscroll
Položaj namiga orodja se poskuša samodejno spremeniti, ko ima nadrejeni vsebnik overflow: auto
ali overflow: scroll
kot naš .table-responsive
, vendar še vedno ohranja položaj prvotne umestitve. Za rešitev nastavite boundary
možnost na kar koli drugega kot privzeto vrednost, 'scrollParent'
na primer 'window'
:
$('#example').tooltip({ boundary: 'window' })
Markup
Zahtevana oznaka za opis orodja je le data
atribut in title
na elementu HTML, za katerega želite, da je opis orodja. Ustvarjena oznaka orodnega opisa je precej preprosta, čeprav zahteva položaj (privzeto nastavljen top
s 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 hover
sprož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 disabled
atributom 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-events
na 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=""
.
sanitize
,
sanitizeFn
in
whiteList
ni 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: |
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: |
html | logično | lažno | Dovoli HTML v opisu orodja. Če je res, bodo oznake HTML v opisu orodja Če vas skrbijo napadi XSS, uporabite besedilo. |
umestitev | niz | funkcijo | 'top' | Kako postaviti opis orodja - samodejno | vrh | dno | levo | prav. 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 |
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.on podpora). 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
Zunanji ovojni element mora imeti |
naslov | niz | element | funkcijo | '' | Privzeta vrednost naslova, če Če je podana funkcija, bo klicana s |
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.
|
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 glejte Popperjevo dokumentacijo o offsetu . |
rezervna umestitev | niz | niz | 'flip' | Dovolite, da določite, kateri položaj bo Popper uporabil pri nadomestni uporabi. Za več informacij glejte Popperjeve dokumente o vedenju |
customClass | niz | funkcijo | '' | Dodajte razrede v opis orodja, ko je prikazan. Upoštevajte, da bodo ti razredi dodani poleg vseh razredov, navedenih v predlogi. Če želite dodati več razredov, jih ločite s presledki: Posredujete lahko tudi funkcijo, ki naj vrne en sam niz, ki vsebuje dodatna imena razredov. |
meja | niz | element | 'scrollParent' | Meja omejitve prelivanja namiga orodja. Sprejema vrednosti 'viewport' , 'window' , 'scrollParent' ali sklic HTMLElement (samo JavaScript). Za več informacij se obrnite na Popperjevo preprečiOverflow dokumentacijo . |
razkužiti | logično | prav | Omogočite ali onemogočite čiščenje. Če je aktivirano 'template' , 'title' bodo možnosti razčiščene. Oglejte si razdelek o razkužilu v naši dokumentaciji za JavaScript . |
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 Popperja Bootstrap, glejte Popperjevo konfiguracijo |
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.tooltip
pride 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.tooltip
zgodi 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.tooltip
ali ). hidden.bs.tooltip
To 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 show se 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 hide je 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.tooltip dogodku, ko je predloga orodja dodana v DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})