Tutorial Tooltips yang Berguna dan Plugin jQuery

Tooltip adalah elemen antarmuka pengguna grafis yang umum. Ini digunakan bersama dengan kursor, biasanya penunjuk mouse. Pengguna mengarahkan kursor ke item, tanpa mengkliknya, dan tooltip mungkin muncul — "kotak hover" kecil dengan informasi tentang item yang sedang diarahkan.

Saya telah mengumpulkan beberapa tutorial dan Plugin jQuery untuk Tooltips.

1. TinyTips – Plugin jQuery Ringan untuk Tooltips

TinyTips adalah plugin jQuery yang sangat ringan yang memberikan kemampuan untuk menambahkan tooltips ke hampir semua elemen di halaman. Didokumentasikan secara menyeluruh dan ramah desainer.

2. Penandaan Foto Bergaya Flickr Menggunakan jQuery

jQuery Photo Tagger hadir sekitar 1.000 baris kode. Dengan demikian, Anda dapat memeriksa halaman proyek atau mencoba demo online sendiri. Harap dicatat bahwa Anda harus menahan tombol CTRL saat mengklik mouse untuk membuat hotspot.

Demo | Unduh

3. TipTip Custom Tooltip jQuery Plugin dengan Gambar Nol

TipTip menggunakan atribut judul seperti halnya tooltip browser asli. Namun, judul akan disalin dan kemudian dihapus dari elemen saat menggunakan TipTip sehingga tooltip browser tidak akan muncul.
TipTip hanya menghasilkan satu set total elemen popup, daripada menghasilkan satu set elemen popup untuk setiap elemen dengan TipTip diterapkan padanya. Ini membantu mempercepat dan mengurangi waktu pemrosesan. Elemen yang dihasilkan adalah semua elemen div dan ditambahkan ke akhir elemen body.

4. Bagaimana Membangun Anotasi Visual Baru dengan CSS3

ZURB telah mengajari kami Cara Membuat Anotasi Visual Baru. Solusinya secara teknis tidak terlalu rumit. Dengan Notable, mereka menganut konsep degradasi yang anggun: mereka memanfaatkan teknik CSS baru yang terdegradasi dengan bersih ke browser lama.

Demo

5. Tampilkan Tautan Anda sebagai Daftar Drop Down dengan Pluralink

Pluralink adalah plugin javascript yang luar biasa untuk mengatur banyak tautan dalam teks Anda.

6. Efek Arahkan Skala Abu-abu dengan CSS & jQuery

Grayscale Hover Effect dengan CSS & jQuery bergantung pada CSS Sprite dan beberapa baris jQuery, tetapi membutuhkan sedikit persiapan sebelum dapat diimplementasikan. Ini tidak direkomendasikan untuk proyek skala besar dan mungkin paling baik untuk menampilkan potongan portofolio.

7. Lihat Lebih Dekat dengan AnythingZoomer jQuery Plugin

Anda memiliki area kecil. Anda mengarahkan mouse ke atasnya. Sebuah area muncul memberi Anda tampilan yang diperbesar lebih dekat. Ini adalah plugin jQuery yang melakukannya. Saya tidak akan memberi tahu Anda untuk apa Anda menggunakannya atau skenario kasus penggunaan yang rumit. Kreativitas Anda sendiri dapat membantu Anda di sana.

Demo

8. Buat Tooltip Kaya Konten dengan JSON dan jQuery

Tutorial ini akan mendemonstrasikan cara membuat tooltips yang didukung oleh jQuery, dengan informasi yang diambil dari array JSON.

Demo

9. Ganti Tooltip Default Anda dengan Pretty (mb) Tooltip

(mb)Tooltip adalah tooltip yang indah untuk halaman web Anda di jQuery.

Unduh

10. Captify Menampilkan Teks Gambar Cantik Muncul Saat Rollover

Captify adalah plugin untuk jQuery yang ditulis oleh Brian Reavis untuk menampilkan keterangan gambar yang sederhana dan cantik yang muncul saat rollover. Ini telah diuji pada Firefox, Chrome, Safari, dan Internet Explorer yang malang. Captify terinspirasi oleh ImageCaptions, plugin jQuery lain untuk menampilkan teks seperti ini.

11. Pratinjau Gambar dengan Plugin imgPreview jQuery

Peter Higgins telah menciptakan Dojo Zoomer. Terbagi menjadi 3 panel. Dengan mengarahkan kursor ke gambar di panel kiri, panel kanan secara dinamis menampilkan bagian gambar yang dipotong, sehingga Anda dapat fokus secara eksplisit pada bagian gambar utama yang menarik bagi Anda.

12. jQuery Javascript Image Magnifier di bawah GPL

JQZoom adalah pembesar gambar javascript yang dibangun di atas kerangka kerja javascript jQuery yang populer.jQzoom adalah skrip yang hebat dan sangat mudah digunakan untuk memperbesar apa yang Anda inginkan.

13. Tooltip Transparan Sederhana dengan jQuery dan CSS

Tooltips CSS sangat populer dalam desain web modern dan bertentangan dengan kepercayaan populer, sangat mudah untuk membuatnya, terutama dengan salah satu kerangka kerja javascript yang sangat populer.

Demo

14. Magic Toolbox – Javascript dan Alat Zoom Gambar Flash

Magic Toolbox telah membuat 2 alat zoom gambar javascript yang luar biasa (Zoom Ajaib dan Magnify Ajaib). Magic Zoom adalah alat zoom JavaScript. Ini adalah cara terbaik untuk menampilkan gambar dengan detail yang luar biasa.

15. Prototip 2 – Membuat Tooltip yang Cantik dengan Mudah

Prototip memungkinkan Anda membuat tooltips sederhana dan kompleks dengan mudah menggunakan kerangka kerja javascript Prototipe.

Demo

16. Tooltip dan Pratinjau Gambar Termudah Menggunakan jQuery

Tooltip dan Pratinjau Gambar termudah adalah salah satu popup gelembung seperti tooltip yang muncul saat Anda menggulung tautan atau thumbnail.

Demo

17. Tooltips Gelembung Popup Gaya Coda dengan jQuery

Coda adalah salah satu alat pengembangan web baru untuk Mac – dan populer di kalangan desainer dan pengembang.

18. Taggify Wilayah Gambar yang Dapat Diklik Menampilkan Tooltip Popup

Taggify adalah widget web yang memungkinkan blogger dan penerbit meningkatkan situs mereka dengan menambahkan tooltips gambar yang ditautkan ke permintaan gambar tertentu.
Demo

19. Tooltips Gelembung yang Tidak Mengganggu dengan Javascript dan CSS

Bubble Tooltips adalah cara mudah untuk menambahkan (melalui sedikit CSS dan javascript) tooltips mewah dengan bentuk balon ke halaman web mana pun.

Demo

20. Tooltips Fade In dan Out untuk Prototipe dan Scriptaculous

CoolTips adalah teknik penggantian tooltips web-browser JavaScript yang ringan dan tidak mengganggu.
CoolTips digunakan untuk menggantikan tooltips web-browser konvensional. Tooltips mendapatkan konten dari atribut judul, sehingga sepenuhnya tidak mengganggu. CoolTips adalah kelas OO berdasarkan Prototipe JS dan kerangka kerja script.aculo.us.

21. Tooltips Transparan dan Memudar Judul Manis

Sweet Titles Fading Tooptips bukanlah tiruan dari NICE Titles juga tidak mencoba untuk memperbaiki upaya revisi Dunstan. Dan itu pasti tidak diambil dari salah satu skrip yang dipenuhi oleh event-handler dari Dynamic Drive .

Demo

22. Prototip Kebanyakan Fitur Tooltips untuk Prototipe

Prototip memungkinkan Anda membuat tooltips sederhana dan kompleks dengan mudah menggunakan kerangka kerja javascript Prototipe. Jika Anda juga menggunakan Scriptaculous, Anda bahkan dapat menambahkan beberapa efek yang bagus.

Demo

23. Tooltips BoxOver DHTML/Javascript Ringan

BoxOver menggunakan javascript / DHTML untuk menampilkan tooltips di situs web. Implementasi tooltips, bagaimanapun, tidak memerlukan pengetahuan tentang DHTML atau javascript. Ada banyak tweak yang dapat diatur untuk menyesuaikannya dengan kebutuhan Anda dengan mengatur melalui atribut "title" tag.