Source

Opisi alata

Dokumentacija i primjeri za dodavanje prilagođenih Bootstrap alatnih opisa s CSS-om i JavaScriptom koristeći CSS3 za animacije i atribute podataka za lokalnu pohranu naslova.

Pregled

Stvari koje treba znati kada koristite dodatak s opisom alata:

  • Opisi se za pozicioniranje oslanjaju na biblioteku treće strane Popper.js . Morate uključiti popper.min.js prije bootstrap.js ili koristiti bootstrap.bundle.min.js/ bootstrap.bundle.jskoji sadrži Popper.js kako bi opisi alata radili!
  • Ako gradite naš JavaScript iz izvora, to zahtijevautil.js .
  • Opisi alata su opt-in zbog performansi, tako da ih morate sami pokrenuti .
  • Opisi s naslovima nulte duljine nikad se ne prikazuju.
  • Navedite container: 'body'kako biste izbjegli probleme s generiranjem u složenijim komponentama (poput naših ulaznih grupa, grupa gumba itd.).
  • Pokretanje opisa alata na skrivenim elementima neće raditi.
  • Opisi za elemente .disabledili disabledmoraju se pokrenuti na elementu omotača.
  • Kada se pokreću iz hiperveza koje se protežu kroz više redaka, opisi alata bit će centrirani. Koristite white-space: nowrap;na svom <a>s kako biste izbjegli ovakvo ponašanje.
  • Opisi alata moraju biti skriveni prije nego što se njihovi odgovarajući elementi uklone iz DOM-a.

Jeste li sve to shvatili? Sjajno, pogledajmo kako rade na nekim primjerima.

Primjer: Omogućite opise posvuda

Jedan od načina da inicijalizirate sve opise alata na stranici bio bi da ih odaberete prema njihovom data-toggleatributu:

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

Primjeri

Zadržite pokazivač iznad donjih veza da biste vidjeli savjete:

Uske hlače sljedeće razine keffiyeh za koje vjerojatno niste čuli. Photo booth beard raw denim letterpress veganska kurirska torba stumptown. Seitan od farme do stola, mcsweeneyjeva fiksna održiva kvinoja 8-bitna američka odjeća ima frotir richardson vinil chambray. Beard stumptown, kardigani banh mi lomo thundercats. Tofu biodizel williamsburg marfa, four loko mcsweeney's cleanse veganski chambray. A stvarno ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Zadržite pokazivač miša iznad gumba u nastavku da biste vidjeli č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 s dodanim prilagođenim HTML-om:

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

Korištenje

Dodatak za opis alata generira sadržaj i oznake na zahtjev, a prema zadanim postavkama postavlja opise alata nakon elementa pokretača.

Pokreni opis alata putem JavaScripta:

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

Markup

Potrebna oznaka za opis alata samo je dataatribut, a titlena HTML elementu želite imati opis alata. Generirano označavanje opisa alata je prilično jednostavno, iako zahtijeva poziciju (prema zadanim postavkama, postavljena topod strane dodatka).

Učinite da opisi alata rade za korisnike tipkovnice i pomoćne tehnologije

Trebali biste samo dodavati opise alata HTML elementima koji se tradicionalno mogu fokusirati tipkovnicom i koji su interaktivni (kao što su veze ili kontrole obrazaca). Iako proizvoljni HTML elementi (kao što <span>je s) mogu biti fokusirani dodavanjem tabindex="0"atributa, to će dodati potencijalno dosadne i zbunjujuće tabulatore na neinteraktivnim elementima za korisnike tipkovnice. Osim toga, većina pomoćnih tehnologija trenutno ne najavljuje opis alata u ovoj situaciji.

Osim toga, nemojte se oslanjati samo na hovernjega kao na okidač za svoj opis alata, jer će to učiniti vaše opise alata nemogućim za pokretanje za korisnike 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 s disabledatributom nisu interaktivni, što znači da ih korisnici ne mogu fokusirati, lebdjeti pokazivačem ili kliknuti kako bi pokrenuli opis alata (ili skočni prozor). Kao zaobilazno rješenje, htjet ćete pokrenuti opis alata iz omotača <div>ili <span>, idealno napravljenog za fokusiranje na tipkovnici pomoću tabindex="0", i nadjačati pointer-eventselement na onemogućenom 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>

Mogućnosti

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

Ime Tip Zadano Opis
animacija Booleov pravi Primijenite CSS fade prijelaz na tooltip
spremnik niz | element | lažno lažno

Dodaje opis alata određenom elementu. Primjer: container: 'body'. Ova je opcija posebno korisna jer vam omogućuje da pozicionirate opis alata u toku dokumenta u blizini elementa pokretača - što će spriječiti da opis alata lebdi od elementa pokretača tijekom promjene veličine prozora.
odgoditi broj | objekt 0

Odgoda prikazivanja i skrivanja opisa alata (ms) - ne odnosi se na vrstu ručnog okidača

Ako je naveden broj, odgoda se primjenjuje na skrivanje/prikazivanje

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

Dopusti HTML u opisu alata.

Ako je istina, HTML oznake u opisu alata titlebit će prikazane u opisu alata. Ako je false, jQueryjeva textmetoda koristit će se za umetanje sadržaja u DOM.

Upotrijebite tekst ako ste zabrinuti zbog XSS napada.
plasman niz | funkcija 'vrh'

Kako postaviti opis alata - automatski | vrh | dno | lijevo | pravo.
Kada autoje navedeno, dinamički će preusmjeriti opis alata.

Kada se funkcija koristi za određivanje položaja, poziva se s DOM čvorom alata kao prvim argumentom i DOM čvorom pokretačkog elementa kao drugim. Kontekst thisje postavljen na instancu opisa alata.
selektor niz | lažno lažno Ako je selektor naveden, objekti opisa alata bit će delegirani navedenim ciljevima. U praksi se ovo koristi za omogućavanje dodavanja skočnih prozora za dinamički HTML sadržaj. Pogledajte ovo i informativan primjer .
šablona niz '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Osnovni HTML za korištenje pri izradi opisa alata.

Opis alata titlebit će umetnut u .tooltip-inner.

.arrowpostat će strelica opisa alata.

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

Zadana vrijednost naslova ako titleatribut nije prisutan.

Ako je dana funkcija, bit će pozvana s thisreferencom postavljenom na element na koji je priložen opis alata.
okidač niz 'hover focus'

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

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

'hover'sama po sebi rezultirat će opisima alata koji se ne mogu pokrenuti putem tipkovnice i trebali bi se koristiti samo ako su prisutne alternativne metode za prenošenje istih informacija korisnicima tipkovnice.
pomaknuti broj | niz 0 Pomak opisa alata u odnosu na cilj. Za više informacija pogledajte Popper.js offset dokumente .
zamjenaPlacement niz | niz 'okrenuti' Omogućuje određivanje pozicije koju će Popper koristiti pri povratku. Za više informacija pogledajte dokumente o ponašanju Popper.js
granica niz | element 'scrollParent' Granica ograničenja prelijevanja opisa alata. Prihvaća vrijednosti 'viewport', 'window', 'scrollParent'ili HTMLElement reference (samo JavaScript). Za više informacija pogledajte Popper.js's preventOverflow dokumente .

Atributi podataka za pojedinačne opise alata

Opcije za pojedinačne opise alata mogu se alternativno odrediti korištenjem atributa podataka, kao što je gore objašnjeno.

Metode

Asinkrone metode i prijelazi

Sve API metode su asinkrone i pokreću prijelaz . Vraćaju se pozivatelju čim prijelaz započne, ali prije nego što završi . Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .

Pogledajte našu JavaScript dokumentaciju za više informacija.

$().tooltip(options)

Priključuje rukovatelj opisom alata kolekciji elemenata.

.tooltip('show')

Otkriva opis elementa. Vraća se pozivatelju prije nego što se alatni opis stvarno prikaže (tj. prije nego što se shown.bs.tooltipdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem opisa alata. Opisi s naslovima nulte duljine nikad se ne prikazuju.

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

.tooltip('hide')

Skriva opis elementa. Vraća se pozivatelju 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 pozivatelju prije nego što se alatni opis stvarno prikaže ili sakrije (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')

Skriva i uništava opis elementa. Opisi alata koji koriste delegiranje (koji se stvaraju pomoću opcije selector) ne mogu se pojedinačno uništiti na elementima okidača potomaka.

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

.tooltip('enable')

Daje mogućnost prikazivanja opisa elementa. Opisi su prema zadanim postavkama omogućeni.

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

.tooltip('disable')

Uklanja mogućnost prikazivanja opisa elementa. Opis alata moći će se prikazati samo ako je ponovno omogućen.

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

.tooltip('toggleEnabled')

Isključuje mogućnost prikazivanja ili skrivanja opisa elementa.

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

.tooltip('update')

Ažurira položaj opisa elementa.

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

Događaji

Vrsta događaja Opis
show.bs.tooltip Ovaj događaj aktivira se odmah kada showse pozove metoda instance.
prikazano.bs.tooltip Ovaj se događaj pokreće kada je opis alata vidljiv korisniku (pričekat će se da se CSS prijelazi završe).
hide.bs.tooltip Ovaj se događaj aktivira odmah nakon hidepozivanja metode instance.
skriven.bs.tooltip Ovaj se događaj pokreće kada se opis alata više ne skriva od korisnika (pričekat će se da se CSS prijelazi završe).
umetnuto.bs.tooltip Ovaj se događaj pokreće nakon show.bs.tooltipdogađaja kada je predložak opisa alata dodan u DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})