Stvaranje Minified Tooltips u čistom CSS s Wenk

S tako čudnim imenom ne biste očekivali mnogo od toga Wenk, besplatno CSS tooltip biblioteka. Ipak, to je jedna od najmanjih knjižnica možete dobiti mjerenje ispod 1KB kada gzipped.

Wenk koristi čisti CSS s podaci-* atributi stvoriti alati uživo da se možete prepoloviti i pozicionirati po želji. Najbolje od svega, to je potpuno besplatna knjižnica s izvornim kodom dostupnim na GitHubu.

Ovi lagani opisi alata vrlo su jednostavni za dodavanje na web-lokaciju. Samo trebaš Wenk.css datoteka dodan u zaglavlje stranice, koje možete preuzeti s GitHub repo-a.

Ili, možete čak i dodajte CDN datoteku koja se nalazi na CDN-u tvrtke GitHub. Evo koda za to:

Ili, ako ste npm / bower fan, možete instalirati ovaj paket iz terminala.

Zadane oznake alata nemaju mnogo prilagođenih podataka. Pustili su te odaberite položaj i širinu, ali morate ručno promijenite CSS ako ih želite drugačije oblikovati.

Na primjer, možda želite dodati CSS strelicu u opis alata koji se pojavljuje iznad elementa opisa alata. To je prilično jednostavno napraviti, ali trebat ćete pretražiti Wenkov stil pronaći točnu CSS klasu proširiti.

Evo primjera nekih zadani kod za Wenkove opise:

   Wenk desno!  

Glavna Wenkova odredišna stranica uključuje demonstracije uživo koje možete testirati lebdeći. Ovi su najosnovnije opise dobit ćete, ali oni su savršeni za knjižnicu koja teži manje od kilobajta.

Jedna od glavnih stvari koju treba razmotriti je podrška za preglednik. Sve verzije preglednika Chrome i Firefox bi trebalo raditi. Isto vrijedi i za Opera 12+ i Opera Mini v8 +. No, čini se da IE8 i IE10 imaju problema prikazivanje ovih opisa alata. Srećom, njihov tržišni udio pada brzo, ali to je nešto za razmatranje prije korištenja.

Još uvijek sam zadivljen koliko možete učiniti s tako malo KB-a. Wenkova knjižnica svjedoči o suvremenom razvoju sučelja i pokazuje da malo može ići daleko.

Možete kopati kroz cijeli izvor na GitHubu, zajedno s demonstracije uživo i isječke koda da biste postavili i stvorili ove opise za vlastitu web-lokaciju.