CSS, JavaScript ve jQuery ile 40+ Faydalı Araç İpucu Komut Dosyası
İlginç bir UI öğesi, araç ipuçları (ayrıca tanıtılır) küçük kutuların görünmesini sağlar. fare imleci, bilgileri içeren belirli bir metin veya görüntünün üzerine getirilir Üzerine gelinen öğeyle ilgili. Kullanıcı deneyimi açısından, ipuçları kullanıcılara en hızlı ve en kolay bilgi kaynağını sağlar. bir şey tıklamak zorunda kalmadan.
Metninize araç ipuçları eklemenin en basit yolu, HTML etiketini kullanmak olsa da veya TITLE =””, ALT =””. Ancak, bazı gerçekten harika JavaScript ve CSS ile oluşturabileceğiniz araç ipucu tasarımları ve stilleri araç ipuçlarını kullanarak Hadi bir bakalım.
CSS
Balloon.css - Balon CSS kütüphanesidir SasS ve LESS ile bestelenmiş etkileşimli bir araç ipucunu göstermek için. Araç ipucunun içeriği ve konumu, cihaz aracılığıyla yapılandırılabilir. veri- bağlıyor. Araç ipucunu solda, sağda veya sağda gösterebilirsiniz. Sen bile içeriğe Emojiyi ekle. Balloon.css, NPM aracılığıyla yüklenebilir veya CDNJS'den yüklenebilir.
Simptip - SasS ile sağlayan Gereksiniminize uyacak şekilde kodu yeniden yapılandırın ve derleyin. Araç ipucu konumu ve içeriği, sınıf adı ve Veri ipucu bağlıyor. Simptip bir NPM, İplik ve Bower paketi.
Hint.css - Araç ipucunu görüntüleyen popüler CSS kütüphanelerinden biri olan Hint.css, Fiverr, Webflow ve Tridiv gibi birçok popüler web sitesi tarafından kullanılır. Diğer iki CSS kütüphanesinin aksine, Hint.css kullanır arya etiketli Sınıf adlarıyla boyut ve rengi yapılandırabilirsiniz. BEM metodolojisini kullanarak. Hint.css, NPM, Bower ve CDNJS’de kullanılabilir..
Microtip - Yerleşik araç ipucu oluşturmak için başka bir harika CSS kütüphanesi “Ulaşılabilirlik” akılda, Microtip kullanımları arya etiketli ipucu içeriğini tutmak veri- araç ipucu boyutunu ve konumunu yapılandırma özelliği.
Araç ipucunu yalnızca düz ol 'CSS dosyasıyla özelleştirmenize izin veren CSS değişkenini kullanır. CSS Değişkenleri zaten birçok web ve mobil tarayıcıda desteklenmektedir. Microtip NPM, İplik paketi ve UNPkg CDN olarak mevcuttur.
Wenk - Sadece 733 bayt. Süper hafif bir kütüphane CSSNext, LESS ve SCSS kullanarak süper modern bir CSS'de yazılmış böylece stilleri istediğiniz gibi kişiselleştirebilir ve derleyebilirsiniz. Wenk, NPM, Yarn ve aşağıdaki ücretsiz CDN servislerinden indirilebilir: rawgit.com ve unpkg.com.
Tooltippy - Bir diğeri hafif CSS kütüphanesi sadece 1 KB boyutunda. Araç ipucu, araç ipucunu şekillendirmek için önceden hazırlanmış çeşitli temalar içerir. Stylus adlı bir CSS ön işlemcisi ile yazılmıştır. Nasıl yapabileceğinize ilişkin talimatlara bakın. bu temaları genişletme veya kişiselleştirme.
ElegantTips - Bu kütüphane bir kaç tane geliyor önceden oluşturulmuş temalar sağlanan sınıf adları ile değiştirilebilir. Diğerlerinden farklı olarak HTML5'e dayanan kütüphaneler veri- ya da arya etiketli özniteliği, ElegantTips araç ipucunu oluşturmak için eklenmiş bir öğe gerektirir. Bu size sağlar araç metnine tam anlamıyla herhangi bir içeriği basit metnin ötesinde ekleyin.
Tootik - Yalnızca bu CSS kitaplığının stil sayfasını CSS, LESS ve SasS biçiminde sağlaması değil, aynı zamanda araç ipucunu özelleştirmek için kullanımı kolay GUI. Bu araç tarafından oluşturulan HTML'yi kolayca kopyalayıp yapıştırabilirsiniz. Bu kadar basit.
VanillaJS
TippyJS - Popper.js tarafından desteklenmektedir, TippyJS bir araç ipucunu yapılandırma seçenekleri bolluğu. Animasyonları, araç ipucu okunu, genişliği, boyutu, temayı ve daha fazlasını özelleştirebiliriz. Ayrıca yapabileceğiniz Geri Arama işlevlerini sağlar. araç ipucu gösterilip gizlendiğinde bir işlevi yürütün. Bu özellikler TippyJS'i, araç ipucu oluşturmak için listemizdeki güçlü JavaScript kütüphanelerimizden biri yapar.
Darsain İpucu - Bu kütüphane, bir araç ipucunun temel uygulamasını sağlar. Yine de, tootip davranışını yapılandırmak için kapsamlı seçenekler sunar ve araç ipucu görünümünü değiştirmek için sınıf adları kümesi. Araç ipucu IE9 gibi eski tarayıcılarda ve gerekirse birkaç ayar ile IE8’de iyi çalışır.
Bubb - Bubb, gelişmiş JavaScript kullanıcıları için uygun olabilir. Kullanarak Basit metinlerin görüntülenmesinin yanı sıra kapsamlı API'ler, Araç ipucuna programlı olarak daha karmaşık bir HTML içeriği ekleyebilirsiniz. Oldukça havalı; Dokümanlara örnekler verebilirsiniz.
çıtçıt - Bir şeyi oluşturmak için teknik bir soyutlama içerir. “babalık”, Bir araç ipucu, bir popover ve açılanlar gibi. TippyJS onu kütüphane temeli olarak kullanır ve web üzerinde Bootstrap, Microsoft ve Atlassian gibi büyük isimler tarafından kullanılır..
YY İpucu - Diğer kütüphanelerin aksine, YY Tooltip HTML öğesi veya özellikleri eklemenizi gerektirmez. Tamamen JavaScript ile çalışır ve içerik, konum ve renkler, HTML öğesi yerine bir Nesnede tanımlanır. Tam bir JavaScript web uygulaması ile birlikte kullanılmak için mükemmel.
Position.js - Bir başka mükemmel yerel JavaScript kitaplığı oluşturmak için ipuçları, Position.js işlevi yapılandırmak ve orada oluşturulan kodu kopyalayıp yapıştırmak için bir GUI sağlar. Position.js React.js veya Vue.js ile birlikte kullanılabilir.
Bezet Araç İpucu - Bu kütüphane sağlar 14 ipucunu görüntülemek için seçenekler; gibi sağ, ayrıldı, alt, Sol merkezi, Sağ uç, alt merkez, Vb bunun üzerine, aynı zamanda yeterince akıllı mevcut alana göre araç ipucu konumunu ayarlayın ipucunu çevreleyen. Demoyu inceleyin.
MouseTip - Bu JavaScrtipt kütüphanesi bir imleç konumu boyunca hareket edecek araç ipucu. Araç ipucu standart olmayan bir şekilde yapılandırılmış mousetip- HTML5 kullanmak yerine özellik veri- bağlıyor. Fare kapanı bir NPM modülü olarak kullanılabilir.
Internetips - Bu kütüphane tarafından oluşturulan araç ipucu olan MousetTip'e oldukça benzer. imleç pozisyonunu takip eder. Her şey HTML yerine JavaScript Nesnesi ve öznitelikler modern tarayıcılar için de oluşturulmuştur. Hafif ve hızlı.
MTip - Araç ipucu için bir JavaScript kitaplığı mükemmel tarayıcı uyumluluğu. Seçeneklerle tamamen özelleştirilebilir IE8 ile uyumludur ve Araç İpucu'nu, bir öğede bile herhangi bir öğeye ekleyebilirsiniz. img (bir resim elemanı).
Bubblesee - basit bir işlevsellik sağlayan hafif bir JavaScript kitaplığı. “ipucu”. Çıktıyı özelleştirmek için karmaşık seçenekler olmadan JavaScript kitaplığını kullanmak kolaydır. Araç ipucu görünümünü değiştirmek isterseniz bir Sass dosyası verilir. Demoyu inceleyin.
Tipfy - Modern JavaScript sözdizimi ES6 ile oluşturulmuş, Tipfy sadece 2 KB boyutunda. Kitaplık iki dosya sürümü sunar: tipfy.min.js betiği ile sağlama modern ES6 sözdizimi, ve tipfy.es5.min.js eski tarayıcılarla uyumluluk gerekiyorsa. Kullanır veri- Araç ipucunu kişiselleştirme özelliği; veri tipfy tarafı, örneğin, araç ipucu yönünü ayarlamak için kullanılır ve veri tipfy metin araç ipucu içeriği ekleme özelliği.
jQuery
Tooltipster - Bu kütüphane neredeyse her şeyi özelleştirmek için kapsamlı seçenekler sunar. tema, animasyon, dokunma desteği, içerik, aç ve kapat tetiği, Ayrıca, geliştiricilerin araç ipucunu özel işlevlerle genişletmelerini sağlayan özel olay dinleyicisi ve geri aramaları da sağlar. Ayrıca, bir jQuery eklentisi olarak, Araç ipucu jQuery sürümüne bağlı olarak IE6 gibi eski tarayıcıda çalışacak Kullanılan.
PROTIP - Bir başka kapsamlı jQuery eklentisi olan Protip, 49 pozisyonu destekliyor, Araç ipucu içeriği için HTML, simge desteği, özel geri aramalar, ve çok daha fazlası. Protip, araç ipucunu kolayca özelleştirmenize izin veren bir GUI sağlar.
POWERTIP - Bu jQuery eklentisi ayrıca geliştiricilere araç ipuçlarını uygulamak için birkaç farklı yol sağlayan Seçenekler ve API'ler sunar. Destekler klavye gezinti; öğeleriyle gezinirken açılır pencerenin görünmesini sağlamak çıkıntı tuş takımı. PowereTip NPM modülü olarak mevcut. RequireJS ve Browserify ile birlikte kullanılabilir..
Erişilebilir Aria İpucu - Erişilebilirlik özelliğine sahip bir jQuery eklentisi, araç ipucu başlıklı bir iletişim kutusu, çok satırlı metin ve yakın bir düğme görüntülemek için tasarlanmış. Bizim listemizde kendi biridir.
TipsJS - Basit bir jQuery eklentisi, ancak oldukça farklı özellikler getiriyor. araç ipucu içeriği bir Veri ipucu nitelik. Dahası, içeriği Markdown biçimlendirmesine benzer şekilde biçimlendirmek için içeriği özel karakterlerle de sarabiliriz. Kullanabiliriz * içeriği koyu yapmak için, ~ italik için ^ başlık için.
Karanlık araç ipucu - Bu kitaplık, araç ipucunu güçlendirmek için gerçekten yararlı bazı özellikler sunar. Örneğin, bir onaylama düğmesi - Evet ve Hayır, araç ipucu görüntülenirken arka planı karartın ve HTML öğeleri ekleyin içeriğe. Bence gerçekten demo sayfasını incelemelisin..
Aria Araç İpucu - Dahili Erişilebilirlik özelliğine sahip başka bir araç ipucu, bu jQuery eklentisi WAI-ARIA 1.1 uyumludur. Yapabileceğiniz bir şekilde duyarlı farklı görünüm boyutları için farklı yapılandırmalar sağlayın. Aria Tooltip adlı bir NPM modülü olarak mevcuttur. t-aria-ipucu.
Toolbar.js - Diğer jQuery eklentisi bir araç ipucunda yalnızca basit metin veya HTML içeriği gösterse de, bu jQuery eklentisi bir araç çubuğu oluşturur. Araç ipucu, üzerinde bir işlem gerçekleştirecek bir simgeye sahip iki veya daha fazla bağlantı içerir. tık, Herhangi bir araç çubuğu gibi. Belgelere ve örneklere göz atın.
VueJS
V-ipucu - V-Tooltip, başlık altında Popper.js tarafından desteklenen bir Vue.js bileşenidir. Bir sağlar adlı yeni direktif V-ipucu Bir araç ipucu oluşturmak için herhangi bir öğeye eklenebilir. V-ipucu araç ipucu içeriğini veya Seçeneklerini içerebilir. Özel bir kenara V-ipucu direktifini kullanarak araç ipucunu da ekleyebilirsiniz. V-popover bileşen. Bu bileşen ile yapabilirsiniz Araç ipucuna daha karmaşık içerik ekleyin Vue.js bileşeni veya HTML ile.
Vue-Bulma İpucu - Bulma UI Çerçevesini temel alan bir araç ipucu oluşturmak için bir Vue.js bileşeni. Bu kütüphane Vue Bulma'nın bir parçasıdır. Fakat ipucu bileşeni, adında bir NPM modülü olarak bulunur. vue-bulma-ipucu Bunu bağımsız bileşenler olarak kullanabileceğinizi.
Vue-Yönergesi ipucu - Genel olarak, Popper.js tabanlı V-Tooltip bileşenine benzer ve aynı yönergeyi sağlar. V-ipucu. Ancak, sağlamak için görünmüyor V-popover bileşen.
Vue-Tippy'nin - Bu kütüphane Tippy.js'yi bir Vue.js bileşenine sarar. Adı verilen özel bir Vue.js direktifine sahiptir. V-tippy HTML niteliği gibi çalışır; araç ipucu içeriği veya kişiselleştirme seçenekleri ekleyebiliriz. Aynı zamanda kullanarak araç ipucu içeriğinde özel Vue.js bileşeni html seçenek.
VueJS-Popover - Özel bir yönergeye sahip özel bir Vue.js V-popover ve iki özel bileşen
Vue-İpucu - Hint.css dosyasını saran bir Vue.js eklentisi. Eklenti özellikleri V-ipucu-Css araç ipucunu ekleme yönergesi. O Hint.css ile aynı seçenek kümesini getiriyor, Böylece onları bir JavaScript nesnesi veya Vue.js değiştiricisi olarak ekleyebilirsiniz..
ReactJS
Joyride Tepki - Bir dizi ipucunu görüntüleyecek bir React bileşeni. Yeni uygulamanıza aşina olmaları için yeni kullanıcıları yönlendirin.
Şamandıralı Tepki - Bu kütüphane, Popper.js'i Floater adlı bir React bileşenine sarar, bu yüzden Floater'inkiyle aynı harika özelliklere sahiptir. Araç ipucu ve açılır pencere ekleyebilir ve ayrıca bu bileşenle uğraşmak bu sanal alandan.
Otomatik ipucunu yanıtla - Otomatik konumlandırma özelliğine sahip basit bir React bileşeni, Autotip araç ipucunun konumunu otomatik olarak ayarla etrafındaki boş alan değiştiğinde.
Tepki Tippy - Tippy.js ve Popover.js üzerine inşa edilmiştir. Bu kütüphane tanıtır İpucu bileşen React uygulamanıza dahil edebilirsiniz.
Tepki İpucu - Hint.css'yi genişleten bir React bileşeni. Bileşenler, Hint.css gibi kullanılamayan birkaç özellik ekler. otomatik konum, gecikme ve Geri arama işlevi.
Daha
Köz İpuçları - Araç ipuçları oluşturmak için bir Ember.js bileşeni, Popper.js üzerine kuruludur. Bileşen ayrıca Erişilebilirlik göz önünde bulundurularak tasarlanmıştır ve bu konuda yaklaşık 508 uyumla uyum sağlamak için gelişmeye devam etmektedir..
D3 İpucu - bir D3.js eklentisi. D3.js grafikler, haritalar, diyagramlar vb. Gibi verilerin görselleştirilmesi için bir JavaScript kütüphanesidir. Bu eklenti, bu verilerin üstüne araç ipucu göstermenizi sağlar.
