Hozzon létre Minified Tooltips-et a Pure CSS-ben a Wenk segítségével

Egy ilyen furcsa névvel nem számíthatsz sokat Wenk, ingyenes CSS eszköztipp könyvtár. Mégis egyik legkisebb könyvtár akkor kaphatunk 1KB alatti mérést, ha gzippel.

Wenk használ tiszta CSS adat-* attribútumok készíteni élő eszköztippek hogy tetszeni fogsz, és pozícionálhatsz. A legjobb az egészben, hogy egy teljesen ingyenes könyvtár, melynek forráskódja elérhető a GitHub-on.

Ezek a könnyű szerszámbillentyűk szuper egyszerűek ahhoz, hogy hozzáadjanak a webhelyéhez. Csak kell Wenk.css fájl hozzáadva az oldalfejléchez, letölthető a GitHub repóból.

Vagy még adja hozzá a CDN fájlt amely a GitHub CDN-jén található. Íme a kód:

Vagy ha npm / bower ventilátor, akkor telepítheti ezt a csomagot a terminálról.

Az alapértelmezett eszköztipp-címkéknek nincs sok egyéni adata. Elengedték válassza ki a pozíciót és a szélességet, de neked kell manuálisan módosítsa a CSS-t ha másképp akarod őket.

Előfordulhat például, hogy egy CSS nyíl hozzáadásra kerül az eszköztipp elem fölött megjelenő eszköztipphez. Ez meglehetősen egyszerű létrehozni, de a Wenk stíluslapot meg kell tisztítani keresse meg a pontos CSS osztályt kiterjeszteni.

Íme néhány minta alapértelmezett kód Wenk eszköztippekhez:

   Wenk jobbra!  

A fő Wenk nyitóoldal tartalmazza élő demók hogy lebegéssel tesztelheted. Ezek a legalapvetőbb eszköztippek kapsz, de tökéletesek egy olyan könyvtárhoz, amely kevesebb, mint egy kilobájt.

Az egyik fontos dolog, amit figyelembe kell venni böngésző támogatása. A Chrome és a Firefox összes verziója jól kell működnie. Ugyanaz az Opera 12+ és az Opera Mini v8 +. Úgy tűnik azonban, hogy az IE8 és az IE10 baj van ezeknek az eszközöknek a megjelenítéséhez. Szerencsére a piaci részesedésük gyorsan csökken, de ezt figyelembe kell venni a használat előtt.

Még mindig csodálkoztam, hogy mennyit tehetsz annyi KB-val. A Wenk könyvtár a modern frontend fejlesztésének tanúbizonysága, és azt mutatja, hogy egy kicsit messzire megy.

Meg tudsz ásni az egészet teljes forrás a GitHub-on együtt élő demók és kódrészletek ezeket az eszközöket saját webhelyére állítsa be és hozza létre.