Source

Alati

Dokumentacija i primjeri za dodavanje prilagođenih Bootstrap opisa alata sa CSS-om i JavaScript-om koristeći CSS3 za animacije i atribute podataka za lokalno skladištenje naslova.

Pregled

Stvari koje trebate znati kada koristite dodatak za opis alata:

  • Alati se oslanjaju na biblioteku treće strane Popper.js za pozicioniranje. Morate uključiti popper.min.js prije bootstrap.js ili koristiti bootstrap.bundle.min.js/ bootstrap.bundle.jskoji sadrži Popper.js da bi opisi radili!
  • Ako gradite naš JavaScript iz izvora, on zahtijevautil.js .
  • 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 .disabledili disabledelemente 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.

Efekt animacije ove komponente ovisi o prefers-reduced-motionmedijskom 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-toggleatributu:

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

Primjeri

Zadržite pokazivač miša preko linkova ispod da vidite opise alata:

Uske pantalone sledećeg nivoa kefije za koje verovatno niste čuli. Foto štand za bradu od sirovog trapera za visoku štampu veganske torbe za glasnike stumptown. Seitan od farme do stola, mcsweeney's fixie održiva 8-bitna američka odjeća od kvinoje ima vinil chambray od terry richardsona. Brada stumptown, kardigani banh mi lomo thundercats. Tofu biodizel williamsburg marfa, četiri loko mcsweeney's cleanse veganski chambray. Zaista ironičan majstor bez obzira na keytar , scenester od farme do stola Banksy Austin twitter obrađuje freegan cred sirovi traper izvorne kave jednog porijekla.

Zadržite pokazivač iznad dugmadi ispod da vidite četiri smjera opisa alata: gore, desno, dolje i lijevo.

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

I sa dodatkom prilagođenog HTML-a:

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

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:

$('#example').tooltip(options)
Overflow autoandscroll

Položaj opisa alata pokušava se automatski promijeniti kada roditeljski kontejner ima overflow: autoili overflow: scrollkao naš .table-responsive, ali i dalje zadržava pozicioniranje originalnog položaja. Da biste to riješili, postavite boundaryopciju na bilo što osim zadane vrijednosti, 'scrollParent'kao što je 'window':

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

Markup

Potrebna oznaka za opis alata je samo dataatribut i titlena HTML elementu želite da imate opis alata. Generirana oznaka opisa alata je prilično jednostavna, iako zahtijeva poziciju (podrazumevano, postavljena na topdodatak).

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 proizvoljni HTML elementi (kao što je <span>s) mogu biti fokusirani dodavanjem tabindex="0"atributa, ovo će dodati potencijalno dosadne i zbunjujuće tab stope na neinteraktivnim elementima za korisnike tastature. Osim toga, većina pomoćnih tehnologija trenutno ne objavljuje opis alata u ovoj situaciji.

Osim toga, nemojte se oslanjati samo na hoverokidač 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-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>

Onemogućeni elementi

Elementi sa disabledatributom 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 rješenje, željet ćete pokrenuti opis alata iz omotača <div>ili <span>, idealno napravljenog za fokusiranje na tastaturi pomoću tabindex="0", i nadjačati pointer-eventson disabled element.

<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

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-animation="".

Ime Tip Default Opis
animacija boolean tačno Primijenite CSS fade prijelaz na opis alata
kontejner string | element | false false

Dodaje opis alata određenom elementu. Primjer: container: 'body'. Ova opcija je posebno korisna jer vam omogućava da pozicionirate opis alata u toku dokumenta u blizini elementa za okidanje - što će spriječiti da opis alata odlebdi od elementa za okidanje tokom promjene veličine prozora.
kašnjenje 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:delay: { "show": 500, "hide": 100 }
html boolean false

Dozvolite HTML u opisu alata.

Ako je tačno, HTML oznake u opisu alata titleće se prikazati u opisu alata. Ako je netačno, jQuery textmetoda će se koristiti za umetanje sadržaja u DOM.

Koristite tekst ako ste zabrinuti zbog XSS napada.
plasman string | funkcija 'vrh'

Kako pozicionirati tooltip - auto | vrh | dno | lijevo | u pravu.
Kada autoje navedeno, dinamički će preusmjeriti opis alata.

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 thisje postavljen na instancu opisa alata.
selektor 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.onpodrška). Pogledajte ovo i informativni primjer .
šablon string '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Osnovni HTML za korištenje prilikom kreiranja opisa alata.

Opis alata titleće biti ubrizgan u .tooltip-inner.

.arrowće postati strelica u opisu alata.

Najudaljeniji element omotača trebao bi imati .tooltipklasu i role="tooltip".
naslov string | element | funkcija ''

Zadana vrijednost naslova ako titleatribut nije prisutan.

Ako je data funkcija, ona će biti pozvana sa svojom thisreferencom postavljenom na element na koji je pripojen opis alata.
okidač string 'hover fokus'

Kako se pokreće opis alata - kliknite | lebdjeti | fokus | priručnik. Možete proslijediti više okidača; odvojite ih razmakom.

'manual'označava da će se opis alata pokrenuti programski putem metoda .tooltip('show'), .tooltip('hide')and ; .tooltip('toggle')ova vrijednost se ne može kombinirati ni sa jednim drugim okidačem.

'hover'samo po sebi će rezultirati opisima alata koji se ne mogu pokrenuti putem tastature, i treba ih koristiti samo ako postoje alternativni načini za prenošenje istih informacija za korisnike tastature.
offset broj | string 0 Pomak opisa alata u odnosu na cilj. Za više informacija pogledajte offset dokumente Popper.js .
backbackPlacement string | niz 'okreni' Dozvolite da odredite koju će poziciju Popper koristiti na rezervnom. Za više informacija pogledajte dokumente o ponašanju Popper.js
granica string | element 'scrollParent' Granica ograničenja preljeva opisa alata. Prihvata vrijednosti 'viewport', 'window', 'scrollParent', ili reference HTMLElementa (samo JavaScript). Za više informacija pogledajte PrevenOverflow dokumente Popper.js .

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.

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 .

$().tooltip(options)

Prilaže rukovao opisom alata kolekciji elemenata.

.tooltip('show')

Otkriva opis elementa. Vraća se pozivaocu prije nego što je opis alata zapravo prikazan (tj. prije nego što se shown.bs.tooltipdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem opisa alata. Alati sa naslovima nulte dužine se nikada ne prikazuju.

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

.tooltip('hide')

Sakriva opis elementa. Vraća se pozivaocu prije nego što je opis alata zapravo skriven (tj. prije nego što se hidden.bs.tooltipdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem opisa alata.

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

.tooltip('toggle')

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.tooltipili ). hidden.bs.tooltipOvo se smatra "ručnim" pokretanjem opisa alata.

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

.tooltip('dispose')

Sakriva i uništava opis elementa. Oznake alata koje koriste delegiranje (koje su kreirane pomoću opcije selector) ne mogu se pojedinačno uništiti na elementima okidača potomaka.

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

.tooltip('enable')

Daje mogućnost prikaza alata elementa. Objašnjenja su podrazumevano omogućena.

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

.tooltip('disable')

Uklanja mogućnost prikaza alata za element. Alat će se moći prikazati samo ako je ponovo omogućen.

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

.tooltip('toggleEnabled')

Uključuje mogućnost prikaza ili sakrivanja opisa elementa.

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

.tooltip('update')

Ažurira poziciju opisa elementa.

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

Događaji

Vrsta događaja Opis
show.bs.tooltip Ovaj događaj se aktivira odmah kada showse pozove metoda instance.
prikazano.bs.opis 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 hidepozove 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.tooltipdogađaja kada je predložak opisa alata dodan u DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})