Tippy.js - Pustaka Tooltip Vanilla Javascript Ringan

Tooltips berguna untuk menampilkan sedikit konten tambahan. Mereka menghemat ruang pada halaman dan memberi Anda ruang untuk menghidupkan sesuatu yang menarik perhatian orang.

Di masa lalu, kami telah membahas skrip tooltip tetapi banyak pengembang menginginkan pustaka khusus. Beberapa lebih suka jQuery, yang lain menginginkan vanilla JS sederhana.

Plugin Tippy berfungsi paling baik untuk grup yang terakhir yang ingin bekerja dengan kode JS vanilla.

Dengan Tippy.js Anda mendapatkan pustaka tooltip berfungsi penuh berjalan di atas Popper.js. Ini berarti plugin memang datang dengan ketergantungan kecil, tetapi jauh lebih mudah untuk dikelola daripada perpustakaan jQuery.

Jadi apa keindahan Tippy? Itu menambah ke gaya Popper default untuk membuat tooltips yang lebih dinamis dengan efek luar biasa.

Anda dapat menambahkan fade, slide, goyangan, durasi khusus, metode panggilan balik, dan bahkan efek dinamis seperti tooltips yang berputar otomatis.

Benar-benar plugin ini akan membawa tooltips Anda ke tingkat yang sama sekali baru dengan fitur kegunaan yang jelas. Kamu bisa menjaga tooltips diperbaiki ke layar dengan elemen halaman tertentu, atau minta mereka mengubah orientasi jika layar menjadi terlalu kecil.

Ini juga mendukung perangkat sentuh yang membuatnya sempurna untuk tata letak responsif. Tooltip HTML diberi label menggunakan standar ARIA untuk aksesibilitas maksimum. Saya tidak dapat memikirkan hal buruk untuk dikatakan tentang plugin ini!

Jika Anda ingin mencoba ini di situs Anda sendiri, cukup unduh salinan kode sumber dari GitHub. Ini termasuk file plugin utama bersama dengan detail tentang cara menginstalnya menggunakan npm.

File skrip Tippy.js default disertakan bersama Popper.js sehingga Anda bahkan tidak perlu mengunduh pustaka tambahan itu. Yang Anda butuhkan hanyalah file JS / CSS default dan halaman web untuk menjalankan tooltips.

Jika Anda ingin menggali lebih dalam beberapa contoh, lihat beranda Tippy.js yang berisi sampel langsung + cuplikan kode yang dapat Anda salin dan gunakan kembali.