40+ Script Tooltips Berguna dengan CSS, JavaScript, dan jQuery

Elemen UI yang menarik, tooltips (juga disebut infotips) membuat kotak kecil muncul ketika kursor mouse diletakkan di atas teks atau gambar tertentu dengan informasi tentang elemen yang sedang melayang. Dalam hal pengalaman pengguna, tooltips memberikan pengguna sumber informasi tercepat dan termudah tanpa harus mengklik apapun.

Padahal cara paling sederhana untuk menambahkan tooltips ke teks Anda adalah dengan menggunakan tag HTML atau TITLE =””, ALT =””. Namun, ada beberapa yang benar-benar keren desain dan gaya tooltips yang dapat Anda buat dengan JavaScript dan CSS menggunakan skrip tooltips. Mari lihat.

CSS

Balloon.css - Balon adalah pustaka CSS disusun dengan SasS dan KURANG untuk menampilkan tip alat interaktif. Konten dan posisi tooltip dapat dikonfigurasi melalui data- atribut. Anda dapat menunjukkan tooltip di sebelah kiri, kanan atau kiri-kanan. Anda bahkan bisa tambahkan emoji ke konten. Balloon.css dapat diinstal melalui NPM dan atau memuatnya dari CDNJS.

Simptip - Dibuat dengan SasS yang memungkinkan untuk mengkonfigurasi ulang dan mengkompilasi ulang kode agar sesuai dengan kebutuhan Anda. Posisi dan konten tooltip dapat dikonfigurasi melalui nama kelas dan tooltip data atribut. Simptip tersedia sebagai Paket NPM, Benang, dan Bower.

Petunjuk - Salah satu pustaka CSS populer untuk menampilkan tooltip, Hint.css digunakan oleh banyak situs web populer seperti Fiverr, Webflow, dan Tridiv. Berbeda dengan dua pustaka CSS lainnya, Hint.css menggunakan label aria Anda dapat mengkonfigurasi ukuran dan warna melalui nama kelas menggunakan metodologi BEM. Hint.css tersedia di NPM, Bower, dan CDNJS.

Microtip - Pustaka CSS luar biasa lainnya untuk membuat tooltip dibangun dengan “Aksesibilitas” dalam pikiran, Microtip menggunakan label aria untuk memegang konten tooltip dan data- atribut untuk mengkonfigurasi ukuran dan posisi tooltip.

Ini menggunakan variabel CSS yang memungkinkan Anda untuk menyesuaikan tooltip hanya dengan file CSS biasa. Variabel CSS sudah didukung di banyak browser web dan seluler. Microtip tersedia sebagai NPM, paket Benang, dan CDP UNPkg.

Wenk - Itu hanya 733 byte. Perpustakaan yang sangat ringan ditulis dalam CSS super modern menggunakan CSSNext, LESS, dan SCSS jadi dapat menyesuaikan dan mengkompilasi ulang gaya dengan cara yang Anda suka. Wenk dapat diunduh dari NPM, Benang, dan layanan CDN gratis berikut: rawgit.com dan unpkg.com.

Tooltippy - Lain pustaka CSS ringan hanya berukuran sekitar 1 KB. Tooltippy mencakup beberapa tema pra-dibuat untuk menata tooltip. Ini ditulis dengan pra-prosesor CSS bernama Stylus. Lihat instruksi tentang bagaimana Anda bisa perluas atau sesuaikan tema ini.

Tips Elegan - Perpustakaan ini dilengkapi dengan beberapa tema pra-dibangun yang dapat diubah dengan nama kelas yang disediakan. Berbeda dengan perpustakaan lain yang mengandalkan HTML5 data- atau label aria atribut, ElegantTips membutuhkan elemen tambahan yang ditambahkan untuk membentuk tooltip. Ini memungkinkan Anda untuk menambahkan konten apa pun ke tooltip di luar teks sederhana.

Tootik - Tidak hanya perpustakaan CSS ini menyediakan stylsheet dalam format CSS, KURANG, dan SasS, ia juga menyediakan GUI yang mudah digunakan untuk menyesuaikan tooltip. Anda cukup menyalin dan menempel HTML yang dihasilkan oleh alat ini. Sesederhana itu.

VanillaJS

TippyJS - Didukung oleh Popper.js, TippyJS hadir dengan banyak pilihan untuk mengkonfigurasi tooltip. Kita dapat menyesuaikan animasi, panah tooltip, lebar, ukuran, tema, dan banyak lagi. Ini juga menyediakan fungsi Callback yang dapat Anda gunakan menjalankan fungsi ketika tooltip ditampilkan dan disembunyikan. Fitur-fitur ini menjadikan TippyJS salah satu pustaka JavaScript kami yang kuat di daftar kami untuk membuat tooltip.

Tips Darsain - Perpustakaan ini menyediakan implementasi dasar dari tooltip. Namun, ia menyediakan opsi yang luas untuk mengkonfigurasi perilaku tootip, dan a set nama kelas untuk mengubah tampilan tooltip. Tooltip berfungsi dengan baik di browser lama seperti IE9 dan, jika perlu, IE8 dengan beberapa penyesuaian.

Bubb - Bubb mungkin cocok untuk pengguna JavaScript tingkat lanjut. Menggunakan nya API yang luas, selain menampilkan teks sederhana, Anda secara terprogram dapat menambahkan konten HTML yang lebih kompleks ke tooltip. Itu sangat keren; Anda dapat merujuk pada contoh-contoh Dokumen.

Popper - Berisi abstraksi teknis untuk membuat sesuatu itu “muncul”, seperti tooltip, popover, dan drop-down. TippyJS menggunakannya sebagai dasar perpustakaan dan digunakan oleh nama-nama besar di web seperti Bootstrap, Microsoft, dan Atlassian.

YT Tooltip - Berbeda dengan perpustakaan lain, YY Tooltip tidak mengharuskan Anda untuk menambahkan elemen atau atribut HTML. Ini berfungsi sepenuhnya dengan JavaScript dan konten, posisi, dan warna, didefinisikan dalam Objek, bukan dalam elemen HTML. Ini sempurna untuk digunakan bersama dengan aplikasi web JavaScript lengkap.

Posisi.js - Pustaka JavaScript asli lain yang luar biasa untuk membuat tooltips, Position.js menyediakan GUI untuk mengonfigurasi fungsi dan cukup menyalin dan menempelkan kode yang dihasilkan di sana. Position.js dapat digunakan bersama dengan React.js atau Vue.js.

Tip Alat Bezet - Perpustakaan ini menyediakan 14 opsi untuk menampilkan tooltip; seperti pada kanan, kiri, bawah, kiri tengah, ujung kanan, Tengah bawah, dll. Selain itu, itu juga cukup pintar sehingga bisa sesuaikan posisi tooltip berdasarkan ruang yang tersedia mengelilingi tooltip. Lihat demo.

Tip Mouse - Pustaka JavaScrtipt ini akan membuat a tooltip yang akan bergerak di sepanjang posisi kursor. Tip alat dikonfigurasikan dengan non-standar perangkap tikus- atribut alih-alih menggunakan HTML5 data- atribut. Mousetip tersedia sebagai modul NPM.

Internetips - Mirip dengan MousetTip, tooltip yang dihasilkan oleh pustaka ini mengikuti posisi kursor. Semuanya dikonfigurasi melalui Objek JavaScript, bukan HTML dan atribut juga dibangun untuk browser modern. Ringan dan cepat.

MTip - Pustaka JavaScript untuk Tooltip dengan kompatibilitas browser yang hebat. Ini kompatibel dengan IE8, sepenuhnya dapat disesuaikan melalui Opsi, dan Anda dapat menambahkan Tooltip ke elemen apa pun bahkan pada Windows Vista img (elemen gambar).

Bubblesee - pustaka JavaScript ringan yang menyediakan fungsionalitas langsung dari a “tooltip”. Sangat mudah untuk menggunakan perpustakaan JavaScript tanpa opsi rumit untuk menyesuaikan output. File Sass disediakan jika Anda ingin mengubah tampilan tooltip. Lihat demo.

Tipfy - Dibangun dengan sintaks JavaScript modern, ES6, Tipfy hanya berukuran 2 KB. Perpustakaan menyediakan dua versi file: tipfy.min.js menyediakan skrip dengan sintaks ES6 modern, dan tipfy.es5.min.js jika Anda memerlukan kompatibilitas dengan browser lama. Itu menggunakan data- atribut untuk menyesuaikan tooltip; itu data-tipfy-side, misalnya, digunakan untuk mengatur arah tooltip, dan digunakan data-tipfy-text atribut untuk menambahkan konten tooltip.

jQuery

Tooltipster - Perpustakaan ini menyediakan opsi yang luas untuk menyesuaikan hampir semua hal seperti tema, animasi, dukungan sentuh, konten, pemicu buka dan tutup, dll. Ini juga menyediakan pendengar acara khusus dan panggilan balik yang memungkinkan pengembang untuk memperluas tooltip dengan fungsi kustom. Juga, menjadi plugin jQuery, the tooltip akan bekerja di browser yang lebih lama seperti IE6 tergantung pada versi jQuery sedang digunakan.

Protip - Plugin jQuery lain yang ekstensif, Protip mendukung 49 posisi, HTML untuk konten tooltip, dukungan ikon, panggilan balik khusus, dan masih banyak lagi. Protip menyediakan GUI yang memungkinkan Anda untuk menyesuaikan tooltip dengan mudah.

PowerTip - Plugin jQuery ini juga menghadirkan Opsi dan API yang menyediakan pengembang sejumlah cara berbeda untuk mengimplementasikan tooltips. Ini mendukung navigasi keyboard; membuat popup muncul ketika menavigasi elemen dengan Tab keyboard. PowereTip adalah tersedia sebagai modul NPM. Ini dapat digunakan dengan RequireJS dan Browserify.

Aria Tooltip yang Dapat Diakses - Plugin jQuery dengan fitur Aksesibilitas di dalamnya, tooltip is dirancang untuk menampilkan kotak dialog dengan judul, multiline teks, dan tombol tutup. Ini adalah salah satu dari daftar kami.

TipsJS - Plugin jQuery sederhana, namun ia membawa fitur yang cukup khas. Itu konten tooltip diatur dengan a tooltip data atribut. Terlebih lagi adalah bahwa kita juga dapat membungkus konten dengan karakter khusus untuk memformat konten yang mirip dengan format penurunan harga. Kita bisa gunakan * untuk membuat konten tebal, ~ untuk miring, dan ^ untuk menuju.

Tip Alat Gelap - Pustaka ini menyediakan beberapa fitur yang sangat berguna untuk menghidupkan tooltip. Misalnya, kita dapat menambahkan tombol konfirmasi - Ya dan Tidak, redupkan latar belakang saat tooltip ditampilkan, dan tambahkan elemen HTML ke konten. Saya pikir Anda benar-benar harus memeriksa halaman demo.

Aria Tooltip - Tooltip lain dengan fitur Aksesibilitas bawaan, plugin jQuery ini kompatibel dengan WAI-ARIA 1.1. Ini responsif dengan cara yang Anda bisa memberikan konfigurasi yang berbeda untuk ukuran viewport yang berbeda. Aria Tooltip tersedia sebagai modul NPM bernama t-aria-tooltip.

Toolbar.js - Sementara plugin jQuery lainnya hanya dapat menampilkan teks sederhana atau konten HTML dalam tooltip, ini Plugin jQuery membuat toolbar. Tip alat akan berisi dua atau lebih tautan dengan ikon yang biasanya akan melakukan tindakan klik, seperti bilah alat apa pun. Lihatlah dokumentasi dan contoh-contohnya.

VueJS

V-Tooltip - V-Tooltip adalah komponen Vue.js yang ditenagai oleh Popper.js di bawah tenda. Ini menyediakan direktif baru bernama v-tooltip yang dapat ditambahkan ke elemen apa pun untuk membuat tooltip. Itu v-tooltip dapat berisi konten tooltip atau Opsi. Selain dari kebiasaan v-tooltip direktif, Anda juga dapat menambahkan tooltip dengan v-popover komponen. Dengan komponen ini, Anda bisa tambahkan konten yang lebih kompleks ke dalam tooltip dengan komponen Vue.js atau HTML.

Vue-Bulma Tooltip - Komponen Vue.js untuk membuat tooltip berdasarkan Kerangka UI Bulma. Perpustakaan ini merupakan bagian dari komponen Vue Bulma. Tetapi komponen tooltip tersedia sebagai modul NPM bernama vue-bulma-tooltip Anda dapat menggunakan ini sebagai komponen mandiri.

Petunjuk-Petunjuk-Vue - Secara keseluruhan ini mirip dengan komponen V-Tooltip berdasarkan Popper.js dan memberikan arahan yang sama yang disebut v-tooltip. Namun, sepertinya tidak menyediakan v-popover komponen.

Vue-Tippy - Pustaka ini membungkus Tippy.js menjadi komponen Vue.js. Ini fitur direktif Vue.js kustom yang disebut v-bergoncang yang berfungsi seperti atribut HTML; kita dapat menambahkan konten untuk tooltip atau opsi untuk menyesuaikannya. Ini juga membuat a komponen Vue.js khusus pada konten tooltip menggunakan html pilihan.

VueJS-Popover - Vue.js khusus dengan direktif khusus disebut v-popover dan dua komponen khusus yaitu dan memberikan fleksibilitas bagi pengembang untuk menambahkan tooltips di aplikasi Vue.js.

Petunjuk-Vue - Pengaya Vue.js yang membungkus Hint.css. Fitur plugin v-hint-css arahan untuk menambahkan tooltip. Saya t membawa set opsi yang sama dengan Hint.css, sehingga Anda dapat menambahkannya sebagai objek JavaScript atau pengubah Vue.js.

ReactJS

Bereaksi Joyride - Komponen Bereaksi untuk menampilkan serangkaian tooltips yang akan memandu pengguna baru untuk membiasakan diri dengan aplikasi baru Anda.

Bereaksi Floater - Pustaka ini membungkus Popper.js menjadi komponen Bereaksi bernama Floater, sehingga memiliki fitur hebat yang sama dengan Floater. Anda dapat menambahkan tooltip dan popup, dan Anda juga bisa bermain-main dengan komponen ini melalui kotak pasir ini.

Bereaksi Autotip - Komponen Bereaksi sederhana dengan fitur penentuan posisi otomatis, eot Autotip akan secara otomatis menyesuaikan posisi ujung alat ketika ruang yang tersedia di sekitarnya berubah.

Bereaksi Tippy - Dibangun di atas Tippy.js dan Popover.js. Perpustakaan ini memperkenalkan a Tip alat komponen itu Anda dapat memasukkan dalam aplikasi Bereaksi Anda.

Petunjuk Bereaksi - Komponen Bereaksi memperluas Hint.css. Komponen menambahkan beberapa fitur yang tidak tersedia di Petunjuk seperti auto-position, delay, dan fungsi Callback.

Lebih

Tip Perangkat Ember - Komponen Ember.js untuk membuat tooltips, itu dibangun di atas Popper.js. Komponen ini juga dirancang dengan mengingat Aksesibilitas dan terus meningkatkan untuk memenuhi sekitar 508 kepatuhan tentang masalah ini.

Tip D3 - plugin D3.js. D3.js adalah pustaka JavaScript untuk visualisasi data seperti bagan, peta, diagram, dll. Plugin ini memungkinkan Anda untuk menampilkan tooltip di atas data ini.