Buat Perkakas yang Diminimalkan dalam CSS Murni dengan Wenk

Dengan nama yang aneh, Anda tidak akan berharap banyak dari Wenk, Gratis Pustaka tooltip CSS. Namun demikian salah satu perpustakaan terkecil Anda bisa mengukur di bawah 1KB saat di-gzip.

Wenk menggunakan CSS murni dengan data-* atribut untuk membuat tooltips hidup Anda dapat mengatur ulang dan memposisikan sesuai dengan keinginan Anda. Yang terbaik dari semuanya, ini adalah perpustakaan yang sepenuhnya gratis dengan kode sumber yang tersedia di GitHub.

Tip ringan ini sangat sederhana untuk ditambahkan ke situs web Anda. Anda hanya perlu Wenk.css mengajukan ditambahkan ke tajuk halaman Anda, yang dapat Anda unduh dari repo GitHub.

Atau, Anda bahkan bisa tambahkan file CDN yang di-host di CDN GitHub. Berikut kode untuk itu:

Atau, jika Anda penggemar npm / bower, Anda dapat menginstal paket ini dari terminal.

Tag tooltip default tidak memiliki banyak data khusus. Mereka membiarkanmu pilih posisi dan lebarnya, tapi kamu harus ubah CSS secara manual jika Anda ingin gaya mereka berbeda.

Misalnya, Anda mungkin ingin panah CSS ditambahkan ke tooltip yang muncul di atas elemen tooltip. Ini cukup sederhana untuk dibuat, tetapi Anda harus memeriksa lembar gaya Wenk temukan kelas CSS yang tepat untuk memperpanjang.

Ini beberapa contoh kode default untuk tooltips Wenk:

   Mengeluh ke kanan!  

Halaman pendaratan Wenk utama termasuk demo langsung Anda dapat menguji dengan melayang. Ini adalah tooltips paling dasar Anda akan mendapatkannya tetapi cocok untuk perpustakaan yang beratnya kurang dari satu kilobyte.

Satu hal utama yang perlu dipertimbangkan adalah dukungan browser. Semua versi Chrome dan Firefox harus bekerja dengan baik. Sama dengan Opera 12+ dan Opera Mini v8 +. Tapi tampaknya IE8 dan IE10 punya masalah render tooltips ini. Untungnya, pangsa pasar mereka menurun dengan cepat tetapi itu sesuatu yang perlu dipertimbangkan sebelum digunakan.

Saya masih kagum betapa banyak yang dapat Anda lakukan dengan begitu sedikit KB. Perpustakaan Wenk adalah bukti perkembangan frontend modern dan itu menunjukkan bahwa sedikit bisa berjalan jauh.

Anda dapat menggali melalui seluruh sumber pada GitHub, bersama dengan demo langsung dan cuplikan kode untuk mengatur & membuat tooltips ini untuk situs Anda sendiri.