Wenk ile Pure CSS'de Minyatür Araç İpuçları Oluşturma

Böyle garip bir isim ile, çok beklemeyin Wenk, bedava CSS ipucu kitaplığı. Yine de en küçük kütüphanelerden biri gziplendiğinde 1 KB'nin altında ölçüm alabilirsiniz.

Wenk kullanır saf CSS ile veri-* Öznitellikler yaratmak canlı ipuçları dinlenip, beğeninize göre konumlandırabilirsiniz. Hepsinden iyisi, GitHub'da mevcut olan kaynak koduyla birlikte tamamen ücretsiz bir kütüphane..

Bu hafif araç ipuçları, web sitenize eklemek için süper basittir. Sadece ihtiyacınız Wenk.css dosya sayfa başlığınıza eklendi, GitHub deposundan indirebileceğiniz.

Veya, sen bile CDN dosyasını ekle GitHub'ın CDN'sinde barındırılıyor. İşte bunun için kod:

Veya, eğer bir npm / bower hayranıysanız, bu paketi yükleyebilirsiniz. terminalden.

Varsayılan araç ipucu etiketleri çok fazla özel veri içermiyor. Sana izin verdiler pozisyonu ve genişliği seçin, ama zorundasın CSS’yi el ile değiştirme farklı tarzlarını istiyorsanız.

Örneğin, araç ipucu öğesinin üzerinde görünen araç ipucuna bir CSS oku eklenmesini isteyebilirsiniz. Bu oluşturmak için oldukça basittir, ancak Wenk stil sayfasını taramanız gerekir. tam CSS sınıfını bulun genişletmek.

İşte bazı örnekler varsayılan kod Wenk ipuçları için:

   Wenk sağa!  

Ana Wenk açılış sayfası canlı demolar gezdirerek test edebilirsiniz. Bunlar en temel ipuçları alacaksın ama kilobayttan daha hafif bir kütüphane için mükemmeller..

Dikkate alınması gereken önemli bir şey tarayıcı desteği. Chrome ve Firefox'un tüm sürümleri iyi çalışmalı. Opera 12+ ve Opera Mini v8 + ile aynı. Ancak IE8 ve IE10 gibi görünüyor başı belada bu araç ipuçlarını gösterme. Neyse ki, onların pazar payı hızla düşüyor, ancak kullanmadan önce göz önünde bulundurulması gereken bir şey.

Hala birkaç KB'le ne kadarını yapabildiğine hala şaşırdım. Wenk kütüphanesi, modern cephe gelişimi için bir kanıt ve biraz daha uzun sürebilir.

Arasında kazabilirsiniz tüm kaynak GitHub’da canlı demolar ve kod parçacıkları bu ipuçlarını kendi siteniz için oluşturmak ve oluşturmak için.