Alati
Dokumentacija i primjeri za dodavanje prilagođenih Bootstrap opisa alata sa CSS-om i JavaScript-om koristeći CSS3 za animacije i data-bs-atribute za lokalno skladištenje naslova.
Pregled
Stvari koje trebate znati kada koristite dodatak za opis alata:
- Alati se oslanjaju na Popper biblioteku treće strane za pozicioniranje. Morate uključiti popper.min.js prije bootstrap.js ili koristiti
bootstrap.bundle.min.js
/bootstrap.bundle.js
koji sadrži Popper da bi opisi radili! - Alati su uključeni iz razloga performansi, tako da ih morate sami inicijalizirati .
- Alati sa naslovima nulte dužine se nikada ne prikazuju.
- Navedite
container: 'body'
kako biste izbjegli probleme s prikazivanjem u složenijim komponentama (kao što su naše grupe za unos, grupe dugmadi, itd.). - Aktiviranje opisa alata na skrivenim elementima neće raditi.
- Oznake za
.disabled
ilidisabled
elemente moraju se pokrenuti na elementu omotača. - Kada se aktiviraju od hiperveza koje se protežu na više redova, opisi alata će biti centrirani. Koristite
white-space: nowrap;
na vašem<a>
s da biste izbjegli ovo ponašanje. - Alati moraju biti skriveni prije nego što se njihovi odgovarajući elementi uklone iz DOM-a.
- Alati se mogu pokrenuti zahvaljujući elementu unutar DOM-a u sjeni.
prefers-reduced-motion
medijskom upitu. Pogledajte odjeljak o
smanjenom pokretu u našoj dokumentaciji o pristupačnosti .
Imaš sve to? Sjajno, da vidimo kako rade na nekim primjerima.
Primjer: Omogućite opise svuda
Jedan od načina da se inicijaliziraju svi opisi alata na stranici bio bi da ih odaberete prema njihovom 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)
})
Primjeri
Zadržite pokazivač miša preko linkova ispod da vidite opise alata:
Tekst čuvara mjesta za demonstriranje nekih inline veza s opisima alata. Ovo je sada samo punilo, ne ubica. Sadržaj postavljen ovdje samo da oponaša prisustvo pravog teksta . I sve to samo da bismo vam dali ideju kako bi opisi izgledali kada se koriste u stvarnim situacijama. Dakle, nadamo se da ste sada vidjeli kako ovi savjeti o vezama mogu funkcionirati u praksi, nakon što ih koristite na vlastitoj web lokaciji ili projektu.
Zadržite pokazivač iznad dugmadi ispod da vidite četiri smjera opisa alata: gore, desno, dolje i lijevo. Uputstva se preslikavaju kada koristite Bootstrap u RTL-u.
<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>
I sa dodatkom prilagođenog HTML-a:
<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>
Sa SVG:
Sass
Varijable
$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;
Upotreba
Dodatak za opis alata generira sadržaj i oznake na zahtjev, a prema zadanim postavkama postavlja opise alata nakon njihovog elementa okidača.
Aktivirajte opis alata putem JavaScripta:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Overflow auto
andscroll
Položaj opisa alata pokušava se automatski promijeniti kada roditeljski kontejner ima overflow: auto
ili overflow: scroll
kao naš .table-responsive
, ali i dalje zadržava pozicioniranje originalnog položaja. Da biste ovo riješili, postavite boundary
opciju (za modifikator okretanja koji koristi popperConfig
opciju) na bilo koji HTMLElement da nadjača zadanu vrijednost, 'clippingParents'
kao što je document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Markup
Potrebna oznaka za opis alata je samo data
atribut i title
na HTML elementu želite da imate opis alata. Generirana oznaka opisa alata je prilično jednostavna, iako zahtijeva poziciju (podrazumevano, postavljena na top
dodatak).
Omogućavanje rada savjeta za korisnike tipkovnice i pomoćne tehnologije
Trebali biste dodati samo opise alata HTML elementima koji su tradicionalno fokusirani na tastaturu i interaktivni (kao što su veze ili kontrole obrasca). Iako se proizvoljni HTML elementi (kao što je <span>
s) mogu fokusirati dodavanjem tabindex="0"
atributa, ovo će dodati potencijalno dosadne i zbunjujuće tab stope na neinteraktivnim elementima za korisnike tastature, a većina pomoćnih tehnologija trenutno ne najavljuje opis alata u ovoj situaciji. Osim toga, nemojte se oslanjati samo na hover
okidač za svoj opis alata, jer će to učiniti da vaše opise alata nije moguće pokrenuti korisnicima tipkovnice.
<!-- 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>
Onemogućeni elementi
Elementi sa disabled
atributom nisu interaktivni, što znači da korisnici ne mogu da se fokusiraju, lebde ili kliknu na njih da bi pokrenuli opis alata (ili skočni prozor). Kao zaobilazno rešenje, poželećete da pokrenete tooltip iz omotača <div>
ili <span>
, idealno napravljenog za fokusiranje na tastaturi koristeći 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
Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-bs-
, kao u data-bs-animation=""
. Obavezno promijenite tip slučaja naziva opcije iz camelCase u kebab-case kada prenosite opcije preko atributa podataka. Na primjer, umjesto korištenja data-bs-customClass="beautifier"
, koristite data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
i
allowList
ne mogu dostaviti korištenjem atributa podataka.
Ime | Tip | Default | Opis |
---|---|---|---|
animation |
boolean | true |
Primijenite CSS fade prijelaz na opis alata |
container |
string | element | false | false |
Dodaje opis alata određenom elementu. Primjer: |
delay |
broj | objekt | 0 |
Odgoda prikazivanja i skrivanja opisa alata (ms) - ne odnosi se na tip ručnog okidača Ako je naveden broj, kašnjenje se primjenjuje i na sakrivanje/prikaži Struktura objekta je: |
html |
boolean | false |
Dozvolite HTML u opisu alata. Ako je tačno, HTML oznake u opisu alata Koristite tekst ako ste zabrinuti zbog XSS napada. |
placement |
string | funkcija | 'top' |
Kako pozicionirati tooltip - auto | vrh | dno | lijevo | u pravu. Kada se funkcija koristi za određivanje položaja, ona se poziva sa DOM čvorom sa opisom alata kao prvim argumentom i pokretačkim elementom DOM čvorom kao drugim. Kontekst |
selector |
string | false | false |
Ako je osiguran selektor, objekti opisa alata će biti delegirani navedenim ciljevima. U praksi, ovo se takođe koristi za primenu alata na dinamički dodane DOM elemente ( jQuery.on podrška). Pogledajte ovo i informativni primjer . |
template |
string | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Osnovni HTML za korištenje prilikom kreiranja opisa alata. Opis alata
Najudaljeniji element omotača trebao bi imati |
title |
string | element | funkcija | '' |
Zadana vrijednost naslova ako Ako je data funkcija, ona će biti pozvana sa svojom |
trigger |
string | 'hover focus' |
Kako se pokreće opis alata - kliknite | lebdjeti | fokus | priručnik. Možete proslijediti više okidača; odvojite ih razmakom.
|
fallbackPlacements |
niz | ['top', 'right', 'bottom', 'left'] |
Definirajte rezervne položaje pružanjem liste plasmana u nizu (po redoslijedu želje). Za više informacija pogledajte Popperove dokumente o ponašanju |
boundary |
string | element | 'clippingParents' |
Granica ograničenja prelivanja u opisu alata (odnosi se samo na Popperov modifikator preventOverflow). Podrazumevano je 'clippingParents' i može prihvatiti referencu HTMLElementa (samo putem JavaScripta). Za više informacija pogledajte Popper's detectOverflow dokumente . |
customClass |
string | funkcija | '' |
Dodajte klase u opis alata kada se prikaže. Imajte na umu da će ove klase biti dodane kao dodatak svim klasama navedenim u predlošku. Da biste dodali više klasa, razdvojite ih razmacima: Također možete proslijediti funkciju koja bi trebala vratiti jedan string koji sadrži dodatna imena klasa. |
sanitize |
boolean | true |
Omogućite ili onemogućite dezinfekciju. Ako se aktivira 'template' i 'title' opcije će biti sanirane. Pogledajte odjeljak za dezinfekciju u našoj JavaScript dokumentaciji . |
allowList |
objekt | Zadana vrijednost | Objekt koji sadrži dozvoljene atribute i oznake |
sanitizeFn |
null | funkcija | null |
Ovdje možete ponuditi vlastitu funkciju dezinfekcije. Ovo može biti korisno ako više volite koristiti namjensku biblioteku za dezinfekciju. |
offset |
niz | string | funkcija | [0, 0] |
Pomak opisa alata u odnosu na cilj. Možete proslijediti niz u atributima podataka sa vrijednostima odvojenim zarezima kao što su: Kada se funkcija koristi za određivanje pomaka, ona se poziva s objektom koji sadrži popper položaj, referencu i popper rects kao prvi argument. Okidač elementa DOM čvor se prosljeđuje kao drugi argument. Funkcija mora vratiti niz sa dva broja: . Za više informacija pogledajte Popperove ofset dokumente . |
popperConfig |
null | objekt | funkcija | null |
Da biste promijenili Bootstrap-ovu zadanu Popper konfiguraciju, pogledajte Popperovu konfiguraciju . Kada se funkcija koristi za kreiranje Popper konfiguracije, ona se poziva sa objektom koji sadrži Bootstrap-ovu zadanu Popper konfiguraciju. Pomaže vam da koristite i spojite zadanu s vlastitom konfiguracijom. Funkcija mora vratiti konfiguracijski objekt za Popper. |
Atributi podataka za pojedinačne opise alata
Opcije za pojedinačne opise alata mogu se alternativno specificirati korištenjem atributa podataka, kao što je gore objašnjeno.
Korištenje funkcije sapopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Metode
Asinhrone metode i prijelazi
Sve API metode su asinhrone i pokreću tranziciju . Oni se vraćaju pozivaocu čim prijelaz započne, ali prije nego što se završi . Osim toga, poziv metode na prelaznu komponentu će biti zanemaren .
Pogledajte našu JavaScript dokumentaciju za više informacija .
show
Otkriva opis elementa. Vraća se pozivaocu prije nego što je opis alata zapravo prikazan (tj. prije nego što se shown.bs.tooltip
događaj dogodi). Ovo se smatra "ručnim" pokretanjem opisa alata. Alati sa naslovima nulte dužine se nikada ne prikazuju.
tooltip.show()
sakriti
Sakriva opis elementa. Vraća se pozivaocu prije nego što je opis alata zapravo skriven (tj. prije nego što se hidden.bs.tooltip
događaj dogodi). Ovo se smatra "ručnim" pokretanjem opisa alata.
tooltip.hide()
preklopiti
Prebacuje opis elementa. Vraća se pozivaocu prije nego što je opis alata zapravo prikazan ili skriven (tj. prije nego što se dogodi događaj shown.bs.tooltip
ili ). hidden.bs.tooltip
Ovo se smatra "ručnim" pokretanjem opisa alata.
tooltip.toggle()
dispose
Sakriva i uništava opis elementa (uklanja pohranjene podatke na DOM elementu). Oznake alata koje koriste delegiranje (koje su kreirane pomoću opcije selector
) ne mogu se pojedinačno uništiti na elementima okidača potomaka.
tooltip.dispose()
omogućiti
Daje mogućnost prikaza alata elementa. Objašnjenja su podrazumevano omogućena.
tooltip.enable()
onemogućiti
Uklanja mogućnost prikaza alata za element. Alat će se moći prikazati samo ako je ponovo omogućen.
tooltip.disable()
toggleEnabled
Uključuje mogućnost prikaza ili sakrivanja opisa elementa.
tooltip.toggleEnabled()
ažurirati
Ažurira poziciju opisa elementa.
tooltip.update()
getInstance
Statička metoda koja vam omogućava da dobijete instancu opisa alata koja je povezana sa DOM elementom
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
getOrCreateInstance
Statička metoda koja vam omogućava da dobijete instancu opisa alata pridruženu DOM elementu ili kreirate novu u slučaju da nije inicijalizirana
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Događaji
Vrsta događaja | Opis |
---|---|
show.bs.tooltip |
Ovaj događaj se aktivira odmah kada show se pozove metoda instance. |
shown.bs.tooltip |
Ovaj događaj se pokreće kada je opis alata vidljiv korisniku (sačekaće da se CSS tranzicije dovrše). |
hide.bs.tooltip |
Ovaj događaj se pokreće odmah kada se hide pozove metoda instance. |
hidden.bs.tooltip |
Ovaj događaj se pokreće kada je opis alata završen sa sakrivanjem od korisnika (će čekati da se CSS prijelazi dovrše). |
inserted.bs.tooltip |
Ovaj događaj se pokreće nakon show.bs.tooltip događaja kada je predložak opisa alata dodan u DOM. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()