Vytvořte Minified Tooltips v Pure CSS s Wenk

S takovým podivným jménem byste od něj moc nečekali Wenku, zdarma Knihovna nástrojů CSS. Přesto je to jedna z nejmenších knihoven můžete měřit pod 1KB při gzipped.

Wenk používá s čistým CSS data-* atributy vytvořit živé nápovědy můžete restyle a pozici podle vašich představ. Nejlepší ze všeho je, že je to zcela bezplatná knihovna se zdrojovým kódem dostupným na GitHub.

Tyto lehké popisky jsou velmi jednoduché přidat na vaše webové stránky. Stačí jen Wenk.css soubor přidány do záhlaví stránky, které si můžete stáhnout z repo GitHub.

Nebo můžete přidat soubor CDN který je hostován na CDN společnosti GitHub. Zde je kód:

Nebo, pokud jste fanouškem npm / bower, můžete tento balíček nainstalovat z terminálu.

Výchozí značky popisků nástrojů nemají mnoho vlastních dat. Nechali vás vyberte polohu a šířku, ale musíš ručně změnit CSS pokud chcete, aby byly stylizované jinak.

Můžete například chtít přidat šipku CSS do nápovědy, která se zobrazí nad prvkem nápovědy. To je poměrně jednoduché vytvořit, ale budete muset vyčistit Wenk stylesheet najít přesnou CSS třídu prodloužit.

Tady je vzorek některých výchozí kód pro popisky Wenk:

   Wenk doprava!  

Hlavní vstupní stránka Wenk obsahuje živá dema můžete testovat vznášením. Tyto jsou nejzákladnější popisky dostanete, ale jsou ideální pro knihovnu, která váží méně než kilobyte.

Jedna důležitá věc, kterou je třeba zvážit, je podporu prohlížeče. Všechny verze Chrome a Firefox by mělo fungovat dobře. Stejně jako Opera 12+ a Opera Mini v8 +. Zdá se však, že IE8 a IE10 mít problém vykreslování těchto popisků. Naštěstí jejich podíl na trhu rychle klesá, ale je to něco, co je třeba zvážit před použitím.

Jsem stále ohromen, jak moc dokážete s tak málo KB. Knihovna Wenk je svědectvím moderního vývoje frontendu a ukazuje, že trochu může jít dlouhou cestu.

Můžete kopat přes celý zdroj na GitHub, spolu s živá dema a útržky kódu nastavit a vytvořit tyto popisky pro vaše vlastní stránky.