Utwórz Minified Tooltips w Pure CSS z Wenkiem

Przy tak dziwnej nazwie niewiele byś się spodziewał Wenk, wolny Biblioteka podpowiedzi CSS. Ale to jest jedna z najmniejszych bibliotek możesz uzyskać pomiar poniżej 1KB podczas gzipowania.

Wenk używa czysty CSS z dane-* atrybuty tworzyć podpowiedzi na żywo że możesz zmienić styl i dopasować do swoich potrzeb. Co najważniejsze, jest to całkowicie darmowa biblioteka z kodem źródłowym dostępnym na GitHub.

Te lekkie podpowiedzi są bardzo proste do dodania do Twojej witryny. Potrzebujesz tylko Wenk.css plik dodane do nagłówka strony, które możesz pobrać z repozytorium GitHub.

Albo możesz nawet dodaj plik CDN który jest hostowany na CDN GitHub. Oto kod tego:

Lub, jeśli jesteś fanem npm / bower, możesz zainstalować ten pakiet z terminala.

Domyślne etykiety podpowiedzi nie mają zbyt wielu niestandardowych danych. Pozwalają ci wybierz pozycję i szerokość, ale musisz ręcznie zmień CSS jeśli chcesz, żeby były stylizowane inaczej.

Na przykład możesz chcieć dodać strzałkę CSS do podpowiedzi, która pojawia się nad elementem podpowiedzi. Jest to dość proste do stworzenia, ale musisz przeszukać arkusz stylów Wenk znajdź dokładną klasę CSS rozszerzyć.

Oto próbka niektórych kod domyślny dla podpowiedzi Wenka:

   Wenk w prawo!  

Główna strona docelowa Wenk zawiera pokazy na żywo które możesz przetestować, unosząc kursor. To są najbardziej podstawowe podpowiedzi dostaniesz, ale są idealne dla biblioteki, która waży mniej niż kilobajt.

Jedną z głównych rzeczy do rozważenia jest obsługa przeglądarki. Wszystkie wersje Chrome i Firefox powinien działać dobrze. To samo dotyczy Opery 12+ i Opery Mini v8 +. Ale wydaje się, że IE8 i IE10 mieć problem renderowanie tych podpowiedzi. Na szczęście ich udział w rynku szybko spada, ale należy rozważyć go przed użyciem.

Nadal jestem zdumiony, jak wiele możesz zrobić z tak małą liczbą KB. Biblioteka Wenk jest świadectwem współczesnego rozwoju frontendu i pokazuje, że trochę może pójść długą drogą.

Możesz kopać przez całe źródło w GitHub wraz z pokazy na żywo i fragmenty kodu skonfigurować i utworzyć te podpowiedzi dla własnej strony.