Buat Petua Mentifikasi dalam CSS Tulen dengan Wenk

Dengan nama yang aneh itu, anda tidak akan mengharapkan banyak Wenk, percuma Perpustakaan tooltip CSS. Namun begitu salah satu perpustakaan yang paling kecil anda boleh mendapatkan ukuran di bawah 1KB apabila gzip.

Menggunakan Wenk CSS tulen dengan data- * sifat-sifatnya untuk mencipta petua hidup bahawa anda boleh menyesuaikan diri dan kedudukan sesuai dengan keinginan anda. Yang paling penting, ini adalah perpustakaan percuma dengan kod sumber yang tersedia di GitHub.

Petua ringan ini mudah untuk ditambahkan ke tapak web anda. Anda hanya perlu Wenk.css fail ditambah kepada pengepala halaman anda, yang anda boleh muat turun dari repo GitHub.

Atau, anda juga boleh tambah fail CDN yang dihoskan pada CDN GitHub. Inilah kod untuk itu:

Atau, jika anda seorang peminat npm / bower anda boleh memasang pakej ini dari terminal.

Tag petua lalai tidak mempunyai banyak data tersuai. Mereka membiarkan anda pilih kedudukan dan lebarnya, tetapi anda perlu menukar secara manual CSS jika anda mahu mereka gaya berbeza.

Sebagai contoh, anda mungkin mahu anak panah CSS ditambahkan pada petua alat yang muncul di atas elemen tooltip. Ini agak mudah untuk dicipta tetapi anda perlu mencuba lembaran gaya Wenk cari kelas CSS yang tepat untuk melanjutkan.

Inilah contoh beberapa kod lalai untuk petua Wenk:

   Wenk ke kanan!  

Halaman arahan Wenk utama termasuk demo langsung bahawa anda boleh menguji dengan melayang. Ini adalah petua yang paling asas anda akan mendapat tetapi mereka sesuai untuk perpustakaan yang mempunyai berat kurang daripada kilobyte.

Satu perkara utama untuk dipertimbangkan adalah sokongan penyemak imbas. Semua versi Chrome dan Firefox perlu bekerja dengan baik. Sama dengan Opera 12+ dan Opera Mini v8 +. Tetapi IE8 dan IE10 kelihatannya ada masalah memberikan petua alat ini. Syukurlah, bahagian pasaran mereka jatuh dengan cepat tetapi ia perlu dipertimbangkan sebelum digunakan.

Saya masih kagum berapa banyak yang boleh anda lakukan dengan begitu sedikit KBs. Perpustakaan Wenk adalah bukti pembangunan frontend moden dan ia menunjukkan bahawa sedikit boleh pergi jauh.

Anda boleh menggali melalui keseluruhan sumber di GitHub, bersama dengan demo langsung dan coretan kod untuk menyediakan & membuat petua alat ini untuk tapak anda sendiri.