Skapa Minifiera verktygstips i ren CSS med Wenk

Med ett så underligt namn skulle du inte förvänta dig mycket av Wenk, en fri CSS verktygstips bibliotek. Ändå är det ett av de minsta biblioteken Du kan få mätning under 1 kg när du skickar den.

Wenk använder ren CSS med data-* attribut att skapa levande verktygstips att du kan återställa och positionera efter eget tycke. Bäst av allt är det ett helt gratis bibliotek med källkod tillgänglig på GitHub.

Dessa lätta verktygsverktyg är super enkla att lägga till på din webbplats. Du behöver bara Wenk.css fil läggas till i sidhuvudet, som du kan ladda ner från GitHub repo.

Eller så kan du ens lägg till CDN-filen som är värd på GitHubs CDN. Här är koden för det:

Eller om du är en npm / bower fläkt kan du installera det här paketet från terminalen.

Standardverktygstipstaggar har inte mycket anpassade data. De låter dig välj position och bredd, men du måste ändra CSS manuellt om du vill ha dem styled annorlunda.

Till exempel kanske du vill att en CSS-pil läggs till verktygstipset som visas ovanför verktygetipselementet. Det här är ganska enkelt att skapa, men du måste skura Wenk-stilarket till hitta den exakta CSS-klassen att utvidga.

Här är ett urval av några standardkod för Wenk verktygstips:

   Höger till höger!  

Den viktigaste Wenk-målsidan inkluderar levande demo som du kan testa genom att sväva. Dessa är de mest grundläggande verktygstipsen du får men de är perfekta för ett bibliotek som väger mindre än en kilobyte.

En viktig sak att tänka på är webbläsarsupport. Alla versioner av Chrome och Firefox ska fungera bra. Samma med Opera 12+ och Opera Mini v8 +. Men IE8 och IE10 verkar har problem vilket ger dessa verktygstips. Lyckligtvis minskar deras marknadsandel snabbt men det är något att tänka på innan du använder.

Jag är fortfarande förvånad över hur mycket du kan göra med så få KB. Wenk-biblioteket är ett testament till modern frontend-utveckling och det visar att lite kan gå långt.

Du kan gräva genom hela källan på GitHub, tillsammans med levande demo och kod snippets att skapa & skapa dessa verktygstips för din egen webbplats.