Създайте Minified Tooltips в Pure CSS с Wenk

С такова странно име не бихте очаквали много Wenk, безплатно Библиотека с подсказки за CSS. И все пак това е една от най-малките библиотеки можете да получите измерване под 1KB, когато gzipped.

Wenk използва чист CSS с данни-* атрибути да създам подсказки на живо че можете да преминете и да позиционирате по ваш вкус. Най-хубавото е, че е напълно безплатна библиотека с изходен код, наличен на GitHub.

Тези леки подсказки са изключително лесни за добавяне към уебсайта ви. Ти просто трябва Wenk.css досие добавени към заглавката на страницата ви, които можете да изтеглите от репо GitHub.

Или дори можете добавете CDN файла който се хоства на CDN на GitHub. Ето кода за това:

Или, ако сте фен на npm / bower, можете да инсталирате този пакет от терминала.

По подразбиране етикетите на подсказките нямат много персонализирани данни. Те ви позволяват изберете позицията и ширината, но трябва ръчно променете CSS ако искате да ги оформите по различен начин.

Например, може да искате CSS стрелка да се добави към подсказката, която се появява над елемента подсказка. Това е доста лесно да се създаде, но трябва да претърсите стиловата таблица на Wenk намерете точния клас CSS да се разшири.

Ето пример за някои код по подразбиране за подсказките на Wenk:

   Wenk надясно!  

Основната целева страница на Wenk включва живи демонстрации които можете да тествате чрез зависване. Това са най-основните подсказки ще получите, но те са идеални за библиотека, която тежи по-малко от килобайт.

Едно от най-важните неща е да се помисли поддръжка на браузъра. Всички версии на Chrome и Firefox трябва да работи добре. Същото се отнася и за Opera 12+ и Opera Mini v8 +. Но IE8 и IE10 изглежда имам проблеми визуализиране на тези подсказки. За щастие, техният пазарен дял спада бързо, но това е нещо, което трябва да се обмисли преди употреба.

Все още съм изумен колко много можете да направите с толкова малко КБ. Библиотеката Wenk е свидетелство за модерното развитие на frontend и показва, че малко може да се извърви дълъг път.

Можете да копаете през целия източник в GitHub, заедно с живи демонстрации и кодови фрагменти да създадете и създадете тези пояснения за собствения си сайт.