Namigi orodij
Dokumentacija in primeri za dodajanje namigov Bootstrap po meri s CSS in JavaScript z uporabo CSS3 za animacije in data-bs-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! - 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-bs-toggle
atributu:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
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. Pri uporabi Bootstrap v RTL so navodila zrcaljena.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-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-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Z SVG:
Sass
Spremenljivke
$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $border-radius;
$tooltip-opacity: .9;
$tooltip-padding-y: $spacer * .25;
$tooltip-padding-x: $spacer * .5;
$tooltip-margin: 0;
$tooltip-arrow-width: .8rem;
$tooltip-arrow-height: .4rem;
$tooltip-arrow-color: $tooltip-bg;
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:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Preliv auto
inscroll
Položaj namiga orodja se poskuša samodejno spremeniti, ko ima nadrejeni vsebnikoverflow: auto
ali overflow: scroll
kot naš .table-responsive
, vendar še vedno ohranja položaj prvotne umestitve. Če želite odpraviti to težavo, nastavite boundary
možnost (za modifikator obračanja, ki uporablja popperConfig
možnost) na kateri koli HTMLElement, da preglasite privzeto vrednost, 'clippingParents'
na primer document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
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-bs-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="tooltip-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 rešitev boste želeli sprožiti namig orodja iz ovoja <div>
ali <span>
, v idealnem primeru narejenega s tipkovnico, z uporabo tabindex="0"
.
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" 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-bs-
, kot v data-bs-animation=""
. Pri posredovanju možnosti prek podatkovnih atributov spremenite vrsto malega črke imena možnosti iz camelCase v kebab-case. Na primer, namesto uporabite data-bs-customClass="beautifier"
, uporabite data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, in
allowList
ni mogoče zagotoviti z uporabo podatkovnih atributov.
Ime | Vrsta | Privzeto | Opis |
---|---|---|---|
animation |
logično | true |
Na opisu orodja uporabite bledeči prehod CSS |
container |
niz | element | lažno | false |
Doda namig orodja določenemu elementu. Primer: |
delay |
š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 | false |
Dovoli HTML v opisu orodja. Če je res, bodo oznake HTML v opisu orodja Če vas skrbijo napadi XSS, uporabite besedilo. |
placement |
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 |
selector |
niz | lažno | false |
Č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 . |
template |
vrvica | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Osnovni HTML za uporabo pri ustvarjanju opisa orodja. Namigi orodij
Zunanji ovojni element mora imeti |
title |
niz | element | funkcijo | '' |
Privzeta vrednost naslova, če Če je podana funkcija, bo klicana s |
trigger |
vrvica | 'hover focus' |
Kako se sproži opis orodja - kliknite | lebdi | fokus | priročnik. Lahko prenesete več sprožilcev; ločite jih s presledkom.
|
fallbackPlacements |
niz | ['top', 'right', 'bottom', 'left'] |
Določite nadomestne umestitve tako, da zagotovite seznam umestitev v nizu (po prednostnem vrstnem redu). Za več informacij glejte Popperjeve dokumente o vedenju |
boundary |
niz | element | 'clippingParents' |
Meja omejitve prelivanja namiga orodja (velja samo za Popperjev modifikator preventOverflow). Privzeto je 'clippingParents' in lahko sprejme sklic HTMLElement (samo prek JavaScripta). Za več informacij se obrnite na dokumente Popper's detectOverflow . |
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. |
sanitize |
logično | true |
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 . |
allowList |
predmet | Privzeta vrednost | Objekt, ki vsebuje dovoljene atribute in oznake |
sanitizeFn |
nič | funkcijo | null |
Tukaj lahko zagotovite lastno funkcijo razkuževanja. To je lahko uporabno, če za izvajanje sanacije raje uporabljate namensko knjižnico. |
offset |
niz | niz | funkcijo | [0, 0] |
Odmik namiga orodja glede na cilj. V podatkovnih atributih lahko posredujete niz z vrednostmi, ločenimi z vejico, kot so: Ko se funkcija uporablja za določanje odmika, se pokliče z objektom, ki vsebuje poper postavitev, referenco in popper rects kot prvi argument. Vozlišče sprožilnega elementa DOM je posredovano kot drugi argument. Funkcija mora vrniti matriko z dvema številoma: . Za več informacij glejte Popperjevo dokumentacijo o offsetu . |
popperConfig |
nič | predmet | funkcijo | null |
Če želite spremeniti privzeto konfiguracijo Popperja za Bootstrap, glejte Popperjeva konfiguracija . Ko se funkcija uporabi za ustvarjanje Popperjeve konfiguracije, se pokliče z objektom, ki vsebuje privzeto Popperjevo konfiguracijo Bootstrapa. Pomaga vam pri uporabi in združitvi privzetih nastavitev z vašo lastno konfiguracijo. Funkcija mora vrniti konfiguracijski objekt za Popper. |
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.
Uporaba funkcije zpopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
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 .
pokazati
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.
tooltip.show()
skriti
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.
tooltip.hide()
preklop
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.
tooltip.toggle()
odstraniti
Skrije in uniči opis orodja elementa (odstrani shranjene podatke o elementu DOM). Namigov orodij, ki uporabljajo delegiranje (ki so ustvarjeni z možnostjo selector
) , ni mogoče posamično uničiti na podrejenih sprožilnih elementih.
tooltip.dispose()
omogočiti
Omogoči prikaz orodnega namig elementa. Namigi orodij so privzeto omogočeni.
tooltip.enable()
onemogočiti
Odstrani možnost prikaza namiga elementa. Namig orodja bo lahko prikazan samo, če bo znova omogočen.
tooltip.disable()
preklopiOmogočeno
Preklopi zmožnost prikaza ali skritja opisa orodja elementa.
tooltip.toggleEnabled()
nadgradnja
Posodobi položaj opisa orodja elementa.
tooltip.update()
getInstance
Statična metoda, ki vam omogoča, da dobite primerek opisa orodja, povezanega z elementom DOM
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
getOrCreateInstance
Statična metoda, ki vam omogoča, da dobite primerek orodnega opisa, povezanega z elementom DOM, ali ustvarite novega, če ni bil inicializiran
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Dogodki
Vrsta dogodka | Opis |
---|---|
show.bs.tooltip |
Ta dogodek se sproži takoj, ko show se pokliče metoda primerka. |
shown.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. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()