Vytvorte miniatúrne tipy v Pure CSS s Wenkom

S takým zvláštnym názvom by ste od neho čakali veľa Wenk, zadarmo Knižnica nástrojov CSS. Napriek tomu je to jedna z najmenších knižníc Môžete získať meranie pod 1KB, keď gzipped.

Wenk používa čistý CSS s data- * atribúty vytvoriť živé tipy aby ste sa mohli premeniť a postaviť podľa vašich predstáv. Najlepšie je to úplne bezplatná knižnica so zdrojovým kódom, ktorý je k dispozícii na GitHub.

Tieto ľahké popisy sú veľmi jednoduché pridať na vaše webové stránky. Potrebujete len to Wenk.css súbor pridané do hlavičky vašej stránky, ktoré si môžete prevziať z repo GitHub.

Alebo by ste mohli dokonca pridajte súbor CDN ktorá je umiestnená na CDN spoločnosti GitHub. Tu je kód pre toto:

Alebo ak ste fanúšikom npm / bower, môžete tento balík nainštalovať z terminálu.

Predvolené popisky popisu nástrojov nemajú veľa vlastných údajov. Nechali vás vyberte pozíciu a šírku, ale musíte to urobiť manuálne zmeniť CSS ak ich chcete štýlovať inak.

Napríklad možno budete chcieť, aby sa šípka CSS pridala do popisu, ktorý sa zobrazil nad prvkom popisu nástroja. To je dosť jednoduché na vytvorenie, ale budete musieť vyčistiť štýl Wenk nájdite presnú triedu CSS predĺžiť.

Tu je ukážka niektorých predvolený kód pre popisy Wenk:

   Wenk vpravo!  

Hlavná vstupná stránka Wenk obsahuje živé ukážky ktoré môžete otestovať vznášaním myši. Toto sú najzákladnejšie tipy získate, ale sú ideálne pre knižnicu, ktorá váži menej ako kilobajt.

Jedna vec, ktorú treba zvážiť, je podpora prehliadača. Všetky verzie prehliadača Chrome a Firefox by mal fungovať dobre. Rovnaké ako Opera 12+ a Opera Mini v8 +. Zdá sa však, že IE8 a IE10 máte problémy vykresľovanie týchto tipov nástrojov. Našťastie, ich podiel na trhu klesá rýchlo, ale je potrebné zvážiť ich použitie.

Som stále prekvapený, koľko môžete urobiť s tak málo KB. Knižnica Wenk je dôkazom moderného vývoja frontendu a ukazuje, že málo môže ísť dlhú cestu.

Môžete prechádzať cez celý zdroj na GitHub spolu s živé ukážky a fragmenty kódu nastaviť a vytvoriť tieto tipy pre vaše vlastné stránky.