40 + Skrip Alat berguna dengan CSS, JavaScript, dan jQuery
Unsur UI yang menarik, petua alat (juga dipanggil infotip) membuat kotak kecil muncul apabila kursor tetikus melayang di atas teks atau imej tertentu dengan maklumat mengenai unsur yang sedang melayang. Dari segi pengalaman pengguna, petua memberikan pengguna sumber maklumat paling cepat dan paling mudah tanpa perlu mengklik apa-apa.
Walaupun cara paling mudah untuk menambah petua pada teks anda ialah menggunakan tag HTML atau TITLE =””, ALT =””. Walau bagaimanapun, terdapat beberapa perkara yang sangat keren Reka bentuk alat dan gaya yang boleh anda buat dengan JavaScript dan CSS menggunakan skrip tooltips. Mari kita lihat.
CSS
Balloon.css - Balon adalah perpustakaan CSS terdiri daripada SasS dan KURANG untuk menunjukkan petua alat interaktif. Kandungan dan kedudukan petua alat dikonfigurasikan melalui data- atribut. Anda boleh menunjukkan petua alat di sebelah kiri, kanan atau kiri kanan. Anda juga boleh tambah Emojis pada kandungan. Balloon.css boleh dipasang melalui NPM dan atau memuatkannya dari CDNJS.
Simptip - Dibuat dengan SasS yang membolehkan menyusun semula dan menyusun semula kod supaya sesuai dengan keperluan anda. Kedudukan dan kandungan tooltip dikonfigurasi melalui nama kelas dan petua alat data atribut. Simptip boleh didapati sebagai Pakej NPM, Benang dan Bower.
Hint.css - Salah satu perpustakaan CSS popular untuk memaparkan petua alat, Hint.css digunakan oleh banyak laman web popular seperti Fiverr, Webflow, dan Tridiv. Tidak seperti dua perpustakaan CSS yang lain, Penggunaan Hint.css aria-label Anda boleh mengkonfigurasi saiz dan warna melalui nama kelas menggunakan kaedah BEM. Hint.css boleh didapati di NPM, Bower, dan CDNJS.
Microtip - Satu lagi perpustakaan CSS hebat untuk mewujudkan tooltip yang dibina dengan “Kebolehcapaian” dalam fikiran, Microtip kegunaan aria-label untuk memegang kandungan tooltip dan data- atribut untuk mengkonfigurasi saiz dan kedudukan tooltip.
Ia menggunakan pembolehubah CSS yang membolehkan anda menyesuaikan tooltip dengan fail biasa 'plain CSS. Pembolehubah CSS telah disokong di banyak pelayar web dan mudah alih. Microtip boleh didapati sebagai NPM, pakej Benang, dan UNPkg CDN.
Wenk - Ia hanya 733 bait. Perpustakaan super ringan ditulis dalam CSS super moden menggunakan CSSNext, KURANG, dan SCSS jadi boleh menyesuaikan dan mengkompilasi semula gaya yang anda suka. Wenk boleh dimuat turun dari NPM, Benang, dan perkhidmatan CDN percuma berikut: rawgit.com dan unpkg.com.
Tooltippy - Satu lagi perpustakaan CSS ringan hanya sekitar 1 KB. Tooltippy merangkumi beberapa tema pra-dibuat untuk menyusun tooltip. Ia ditulis dengan pra-pemproses CSS bernama Stylus. Lihat arahan tentang cara anda boleh melanjutkan atau menyesuaikan tema ini.
ElegantTips - Perpustakaan ini dilengkapi dengan beberapa orang tema pra-dibina yang boleh diubah dengan nama kelas yang disediakan. Tidak seperti yang lain, perpustakaan yang bergantung pada HTML5 data- atau aria-label atribut, ElegantTips memerlukan elemen tambahan yang ditambahkan untuk membentuk petua alat. Ini membolehkan anda tambah secara literal apa-apa kandungan pada tooltip melangkaui teks mudah.
Tootik - Bukan sahaja perpustakaan CSS ini menyediakan stylsheet dalam format CSS, LESS, dan SasS, ia juga menyediakan satu GUI mudah digunakan untuk menyesuaikan tooltip. Anda hanya boleh menyalin dan menyisipkan HTML yang dihasilkan oleh alat ini. Itulah yang mudah.
VanillaJS
TippyJS - Dikuasakan oleh Popper.js, TippyJS dilengkapi dengan banyak pilihan untuk mengkonfigurasi tooltip. Kita boleh menyesuaikan animasi, panah tooltip, lebar, saiz, tema, dan banyak lagi. Ia juga menyediakan fungsi Panggil balik dengan mana anda boleh melaksanakan fungsi apabila tooltip ditunjukkan dan tersembunyi. Ciri-ciri ini menjadikan TippyJS salah satu perpustakaan JavaScript berkuasa kami di dalam senarai kami untuk mencipta petua alat.
Tooltip Darsain - Perpustakaan ini menyediakan penerapan asas petua alat. Namun, ia menyediakan pilihan yang luas untuk mengkonfigurasi tingkah tootip, dan a set nama kelas untuk menukar penampilan tooltip. Petua alat berfungsi dengan baik pada pelayar lama seperti IE9 dan, jika diperlukan, IE8 dengan beberapa pelarasan.
Bubb - Bubb mungkin sesuai untuk pengguna JavaScript lanjutan. Menggunakannya API yang luas, selain memaparkan teks ringkas, anda secara tatabahasa boleh menambah kandungan HTML yang lebih kompleks pada petua alat. Ia cukup keren; anda boleh merujuk kepada Dokumen contohnya.
Popper - Mengandungi abstraksi teknikal untuk mencipta sesuatu itu “muncul”, seperti tooltip, popover, dan drop-down. TippyJS menggunakannya sebagai asas perpustakaan dan digunakan oleh nama-nama besar di web seperti Bootstrap, Microsoft, dan Atlassian.
YT Tooltip - Tidak seperti perpustakaan lain, YY Tooltip tidak mengharuskan anda untuk menambah unsur HTML atau atribut. Ia berfungsi sepenuhnya dengan JavaScript dan kandungan, kedudukan, dan warna, ditakrifkan dalam Objek dan bukannya dalam elemen HTML. Ia sempurna untuk digunakan bersama dengan aplikasi web JavaScript penuh.
Position.js - Satu lagi perpustakaan JavaScript asli yang sangat baik untuk membuat petua, Position.js menyediakan GUI untuk mengkonfigurasi fungsi dan hanya menyalin dan menampal kod yang dihasilkan di sana. Position.js boleh digunakan bersama dengan React.js atau Vue.js.
Bezet Tooltip - Perpustakaan ini menyediakan 14 pilihan untuk memaparkan petua alat; seperti pada betul, ditinggalkan, bawah, kiri-tengah, hujung kanan, bawah-tengah, dan lain-lain. Selain itu, ia juga cukup pintar yang boleh laraskan kedudukan tooltip berdasarkan ruang yang ada mengelilingi petua alat. Lihat demo itu.
MouseTip - Perpustakaan JavaScrtipt ini akan mencipta petua yang akan bergerak di sepanjang kedudukan kursor. Petua alat dikonfigurasi dengan standard yang tidak standard mousetip- atribut dan bukannya menggunakan HTML5 data- atribut. Mousetip boleh didapati sebagai modul NPM.
Internetips - Serupa dengan MousetTip, tooltip yang dihasilkan oleh perpustakaan ini mengikuti kedudukan kursor. Semuanya dikonfigurasi melalui Objek JavaScript bukan HTML dan atribut juga dibina untuk penyemak imbas moden. Ia ringan dan cepat.
MTip - Pustaka JavaScript untuk Petua Alat dengan keserasian pelayar yang hebat. Ia serasi dengan IE8, disesuaikan sepenuhnya melalui Pilihan, dan anda boleh menambah Tooltip ke mana-mana elemen walaupun pada img (elemen imej).
Bubblesee - perpustakaan JavaScript ringan yang menyediakan fungsi mudah a “petua alat”. Sangat mudah menggunakan pustaka JavaScript tanpa pilihan rumit untuk menyesuaikan output. Fail Sass disediakan jika anda ingin menukar penampilan tooltip. Lihat demo itu.
Tipfy - Dibina dengan sintaks JavaScript moden, ES6, Tipfy hanya berukuran 2 KB. Perpustakaan menyediakan dua versi fail: tipfy.min.js menyediakan skrip dengan sintaks ES6 moden, dan tipfy.es5.min.js jika anda memerlukan keserasian dengan penyemak imbas yang lebih lama. Ia menggunakan data- atribut untuk menyesuaikan tooltip; yang data-tipfy-side, sebagai contoh, digunakan untuk menetapkan hala tuju alat dan menggunakannya data-tipfy-text atribut untuk menambah kandungan tooltip.
jQuery
Tooltipster - Perpustakaan ini menyediakan pilihan yang luas untuk menyesuaikan hampir apa-apa seperti tema, animasi, sokongan sentuh, kandungan, pencetus buka-dan-dekat, dan lain-lain Ia juga menyediakan pendengar acara adat dan panggilan balik yang membolehkan pemaju untuk memperluaskan petua alat dengan fungsi tersuai. Juga, menjadi plugin jQuery, yang petua alat akan berfungsi pada pelayar yang lebih lama seperti IE6 bergantung pada versi jQuery digunakan.
Protip - Satu lagi plugin jQuery yang luas, Protip menyokong 49 jawatan, HTML untuk kandungan tooltip, sokongan ikon, panggilan balik tersuai, dan banyak lagi. Protip menyediakan GUI yang membolehkan anda menyesuaikan tooltip dengan mudah.
PowerTip - Plugin jQuery ini juga membawa Pilihan dan API menyediakan pemaju sejumlah cara yang berbeza untuk melaksanakan tooltips. Ia menyokong navigasi keyboard; membuat pop timbul apabila menavigasi unsur dengan Tab papan kekunci. PowereTip adalah tersedia sebagai modul NPM. Ia boleh digunakan dengan RequireJS dan Browserify.
Alat Alat Aria yang Boleh diakses - Plugin jQuery dengan ciri Kebolehcapaian terbina dalam, tooltip adalah direka untuk memaparkan kotak dialog dengan tajuk, multiline teks, dan butang yang rapat. Ia adalah salah satu dari senarai kami sendiri.
TipsJS - Plugin jQuery yang mudah, tetapi ia membawa ciri yang agak tersendiri. The Kandungan petua ditetapkan dengan a petua alat data atribut. Terlebih lagi ialah kita juga boleh membungkus kandungan dengan aksara khas untuk memformat kandungan yang serupa dengan pemformatan Markdown. Kita boleh guna * untuk menjadikan kandungan itu berani, ~ untuk italik, dan ^ untuk menuju.
Tooltip gelap - Perpustakaan ini menyediakan beberapa ciri yang sangat berguna untuk menyandarkan petua alat. Sebagai contoh, kita boleh menambah butang mengesahkan - Ya dan Tidak, redup latar belakang semasa tooltip dipaparkan, dan menambah elemen HTML kepada kandungan. Saya fikir anda benar-benar perlu menyemak halaman demo.
Arahan Tool Arahan - Petua alat lain dengan ciri Kebolehcapaian terbina dalam, plugin jQuery ini mematuhi WAI-ARIA 1.1. Ia responsif dengan cara yang anda boleh menyediakan konfigurasi yang berbeza untuk saiz paparan yang berbeza. Tooltip Aria boleh didapati sebagai modul NPM yang dinamakan t-aria-tooltip.
Toolbar.js - Walaupun plugin jQuery yang lain hanya boleh menunjukkan teks mudah atau kandungan HTML dalam tooltip, ini plugin jQuery mencipta bar alat. Petua alat mengandungi dua atau lebih pautan dengan ikon yang biasanya akan melakukan tindakan klik, seperti mana-mana bar alat. Lihat dokumentasi dan contoh.
VueJS
V-Tooltip - V-Tooltip adalah komponen Vue.js dikuasakan oleh Popper.js di bawah tudung. Ia menyediakan a arahan baru bernama v-tooltip yang boleh ditambah kepada mana-mana unsur untuk membuat tooltip. The v-tooltip boleh mengandungi kandungan tooltip atau Pilihan. Selain daripada kebiasaannya v-tooltip arahan, anda juga boleh menambah petua alat dengan v-popover komponen. Dengan komponen ini, anda boleh tambah kandungan yang lebih rumit ke dalam petua alat dengan komponen Vue.js atau HTML.
Petua Vue-Bulma - Satu komponen Vue.js untuk mencipta petua alat berdasarkan Rangka Kerja Bulma UI. Perpustakaan ini adalah sebahagian daripada komponen Vue Bulma. Tetapi, Komponen petua boleh didapati sebagai modul NPM yang dinamakan vue-bulma-tooltip bahawa anda boleh menggunakannya sebagai komponen mandiri.
Vue-Directive-Tooltip - Keseluruhannya adalah sama dengan komponen V-Tooltip berdasarkan Popper.js dan menyediakan arahan yang sama dipanggil v-tooltip. Walau bagaimanapun, nampaknya tidak memberikan v-popover komponen.
Vue-Tippy - Perpustakaan ini membungkus Tippy.js ke dalam komponen Vue.js. Ia mempunyai arahan Vue.js tersuai yang dipanggil v-tippy yang berfungsi seperti atribut HTML; kami boleh menambah kandungan untuk tooltip atau pilihan untuk menyesuaikannya. Ia juga membuat a komponen Vue.js adat pada kandungan tooltip menggunakan html pilihan.
VueJS-Popover - Vue.js adat dengan arahan tersuai dipanggil v-popover dan dua komponen khusus iaitu
Vue-Hint - Plugin Vue.js yang membungkus Hint.css. Ciri pemalam v-hint-css arahan untuk menambah petua alat. Ia membawa pilihan yang sama seperti Hint.css, jadi anda boleh menambahkannya sebagai objek JavaScript atau pengubah Vue.js.
ReactJS
React Joyride - Komponen React untuk memaparkan satu set petua yang akan membimbing pengguna baru untuk mengenali aplikasi baharu anda.
React Floater - Perpustakaan ini membungkus Popper.js menjadi komponen React yang dinamakan Floater, jadi ia mempunyai ciri-ciri hebat yang sama seperti Floater. Anda boleh menambah tooltip dan popup, dan anda juga boleh bermain-main dengan komponen ini melalui kotak pasir ini.
Reakan Autotip - Komponen React yang mudah dengan ciri auto-positioning, eact Autotip akan secara automatik menyesuaikan kedudukan petua alat apabila ruang yang ada di sekitarnya berubah.
React Tippy - Dibina di atas Tippy.js dan Popover.js. Perpustakaan ini memperkenalkan a Petua alat komponen itu anda boleh memasukkan dalam aplikasi React anda.
Berikan Reaksi - Komponen React memanjangkan Hint.css. Komponen menambah beberapa ciri yang tidak terdapat di Hint.css seperti kedudukan auto, kelewatan, dan fungsi Panggil balik.
Lebih banyak
Petua Ember - Komponen Ember.js untuk membuat petua, ia dibina di atas Popper.js. Komponen ini juga direka dengan Kebolehaksesan dan terus diperbaiki untuk mematuhi sekitar 508 complience mengenai perkara ini.
Tip D3 - plugin D3.js. D3.js adalah pustaka JavaScript untuk visualisasi data seperti carta, peta, gambar rajah, dll. Plugin ini membolehkan anda untuk menunjukkan petua alat di atas data ini.
