Microtip - Perpustakaan Tooltip CSS dengan Fitur Aksesibilitas Asli

Anda dapat melakukan pencarian cepat di GitHub untuk menemukan lusinan pustaka tooltip kustom. Dan sepertinya yang baru masuk web setiap bulan.

Microtip adalah sumber daya yang unik karena berjalan pada tooltips CSS murni, menawarkan estetika khusus, dan menggunakan kode sumber yang sepenuhnya dapat diakses untuk semua pengguna.

Jika Anda tidak pernah terlalu memikirkan aksesibilitas maka Microtip mungkin akan berubah pikiran. Ini adalah perpaduan sempurna dari desain bersih fungsionalitas untuk semua perangkat, semua browser, dan untuk pengguna dengan gangguan utama.

Di beranda, Anda akan menemukan tautan unduhan ke perpustakaan Microtip bersama dengan sekelompok demo kode.

Anda bisa mendapatkan pengaturan ini melalui manajer paket, unduhan langsung, atau dengan menarik langsung dari CDN. Saya t dilengkapi dengan satu file CSS dan pada dasarnya itulah yang Anda butuhkan.

Setelah Anda menambahkan Microtip ke halaman Anda, Anda dapat mulai menambahkan tooltips ke elemen halaman. Ini adalah sepenuhnya sesuai dengan WAI sehingga mereka sesuai dengan standar aksesibilitas modern dengan sempurna.

Berikut ini contoh kode tooltip yang dilampirkan ke elemen tombol dengan posisi khusus:

Tidak banyak kode yang benar?

Perpustakaan ini sangat ringan dengan total 1KB yang diperkecil. Itu gila mengingat berapa banyak yang Anda dapatkan dengan tooltips ini.

Properti CSS kustom dapat dilewatkan melalui atribut HTML untuk menentukan ukuran font, gaya transisi, pelonggaran, dan banyak pengaturan lainnya.

Anda juga bisa menimpa CSS secara langsung untuk membuat tooltips lebih besar dengan berbagai warna atau font.

Lihatlah bagian kustomisasi di halaman utama untuk detail lebih lanjut. Semuanya berjalan melalui HTML dan CSS sehingga Anda tidak perlu pengetahuan skrip apa pun untuk membuatnya bekerja.

Microtip itu super mudah diatur dan disesuaikan jadi jika Anda setidaknya tahu coding frontend dasar Anda akan baik-baik saja.

Tetapi lihat repo GitHub untuk info pengaturan lebih lanjut & untuk mengambil salinan stylesheet.

Jika Anda memiliki pertanyaan atau saran untuk fitur-fitur baru, Anda juga dapat mengirim pesan kepada pembuatnya di Twitter @_ighosh.