Tambahkan Label Gambar Tooltip Sederhana dengan Taggd

Anda tahu bagaimana Facebook memungkinkan Anda label wajah dalam foto? Baik, Taggd agak mirip dengan CSS / JS menggunakan titik untuk memberi notasi di mana tooltips akan muncul pada gambar.

Perpustakaan sepenuhnya gratis, dan tidak memerlukan dependensi seperti jQuery. Saya t berjalan pada JavaScript vanilla murni, dan itu sangat mudah untuk diatur.

Anda bisa belajar sedikit lebih banyak dari halaman utama Taggd yang termasuk demo dan beberapa langkah dasar untuk memulai.

Ada juga tautan ke dokumentasi online menggunakan Doclets, aplikasi web kecil yang rapi yang dibuat untuk dokumentasi JS. Kamu bisa cari versi Taggd, atau telusuri versi saat ini di cabang utama.

Dari sana, Anda akan mendapatkan daftar besar properti kamu bisa memakai. Setiap dokumen dibagi dengan fungsi-fungsi itu beroperasi pada gambar (seperti addTag () atau getTag ()) diikuti oleh fungsi yang membantu Anda memanipulasi tag tertentu (seperti setPosition ()).

Sekali lagi semuanya berjalan pada JavaScript vanilla jadi Anda tidak perlu khawatir tentang masalah sintaksis.

Untuk memulai lihat repo GitHub, dan ikuti petunjuk pengaturan.

Anda cukup menambahkan file Taggd CSS dan JS ke dalam Anda bagian , lalu buat contoh baru elemen Taggd. Ini dapat didefinisikan satu per satu atau dalam sebuah array.

Kemudian menambahkannya ke gambar, dan presto! Anda siap berangkat.

Saya ingin sekali melihatnya fitur tambahan untuk menyesuaikan label tag, dan mengubah bentuknya. Akan luar biasa membuat tag persegi untuk mengelilingi objek daripada titik merah muda kecil. Tetapi untuk perpustakaan gratis tanpa ketergantungan, saya tidak bisa mengeluh banyak.

Sejauh ini perpustakaan ini dibuat hanya untuk browser modern, dan tidak mendukung degradasi yang anggun. Namun Anda selalu dapat membuka masalah pada halaman repo atau mencoba untuk menyelesaikan masalah lain jika Anda melihat ada yang sederhana. Namun demikian, Taggd masih merupakan plugin yang heck, dan praktis untuk digunakan untuk proyek apa pun.

Periksa halaman beranda penulis untuk Kode sampel dan Tautan DL bersama dengan a tautan ke halaman dokumentasi.

Dan jika Anda memiliki pertanyaan atau saran, jangan ragu untuk mengirimkan pesan kepada pencipta Tim Severien di Twitternya @TimSeverien.