Tippy.js - Hafif Vanilya Javascript Araç İpucu Kütüphanesi

İpuçları, az miktarda ek içerik göstermek için kullanışlıdır. Sayfada yer kazanıyorlar ve insanların dikkatini çeken bir şeyi canlandırmak için size yer veriyorlar.

Geçmişte, araç ipucu komut dosyalarını işledik ancak birçok geliştirici özel kitaplıklar istiyor. Bazıları jQuery'yi tercih ederken, diğerleri basit vanilya JS istiyor.

Tippy eklentisi ikinci grup için en iyi sonucu verir vanilla JS kodu ile çalışmak isteyenlere.

Tippy.js ile bir tamamen işleyen araç ipucu kütüphanesi Popper.js üzerine çalışıyor. Bu, eklentinin küçük bir bağımlılıkla birlikte geldiği anlamına gelir, ancak yönetilmesi jQuery kütüphanesinden çok daha kolaydır.

Peki Tippy'nin güzelliği nedir? Oluşturmak için varsayılan Popper stillerine eklenir daha dinamik ipuçları inanılmaz efektler ile.

Solmaya, slaytlara, kıpırdatmaya, özel sürelere, geri arama yöntemlerine ve hatta otomatik dönen araç ipuçları gibi dinamik efektler ekleyebilirsiniz.

Gerçekten bu eklenti iyi tanımlanmış kullanılabilirlik özellikleriyle araç ipuçlarını tamamen yeni bir seviyeye çıkaracak. Sende kalabilir belirli sayfa öğeleriyle ekrana sabitlenmiş araç ipuçları, veya ekran çok küçük olursa yönünü değiştirmelerini sağlayın.

Ayrıca, duyarlı düzenler için bunu mükemmel kılan dokunmatik aygıtları da destekler. Araç ipucu HTML'si, maksimum erişilebilirlik için ARIA standartları kullanılarak etiketlenir. Bu eklenti hakkında söylenecek kötü bir şey düşünemiyorum!

Bunu kendi sitenizde denemek istiyorsanız, kaynak kodunun bir kopyasını GitHub'dan indirebilirsiniz. Bu, ana eklenti dosyalarını ve npm kullanarak nasıl kurulacağına dair detayları içerir..

Varsayılan Tippy.js betiği Popper.js ile birlikte gelir, böylece bu ekstra kitaplığı indirmenize gerek kalmaz. Tek ihtiyacınız olan varsayılan JS / CSS dosyası ve araç ipuçlarını çalıştıracak bir web sayfası.

Bazı örneklerde daha fazla araştırma yapmak istiyorsanız, kopyalayıp yeniden kullanabileceğiniz canlı örnekler ve kod parçacıkları içeren Tippy.js ana sayfasına bakın..