7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Buat Tooltip yang Lebih Baik dengan Kedahsyatan jQuery

Read Time: 10 mins

Indonesian (Bahasa Indonesia) translation by Afiff Soebarkah (you can also view the original English article)

Browser akan secara otomatis menampilkan tooltip ketika Anda memberikan title atribut. Internet Explorer juga akan menggunakan atribut alt. Tapi, dalam tutorial ini saya akan menunjukkan kepada Anda cara cepat menulis sebuah plugin jQuery yang akan menggantikan tooltip peramban biasa dengan sesuatu yang sedikit cemerlang.




Salah satu alat hebat yang kami miliki di tas pengembangan web kami adalah tooltips. Keterangan alat adalah kotak
yang muncul ketika Anda Arahkan kursor ke elemen seperti sebuah hyperlink. Tooltips ini menyediakan tambahan
informasi tentang elemen. Sebagai contoh, link dengan sedikit atau tidak ada teks (ikon) dapat menjadi membingungkan.
Memberikan hukuman tambahan atau dua dalam tooltip untuk menjelaskan kepada pengguna apa yang akan terjadi jika mereka klik di atasnya.


Sebelum Anda mulai

Tutorial ini mungkin akan masuk dalam kategori Intermediate. Petunjuknya berasumsi bahwa Anda memiliki setidaknya
pemahaman dasar tentang HTML / CSS, teknik mengiris dan jQuery.

Jika Anda membutuhkan penyegaran di jQuery, berikut adalah beberapa situs yang disarankan:

Agar Anda memiliki gagasan yang jelas tentang file yang terlibat dalam tutorial ini, di sini adalah apa struktur file harus terlihat
seperti pada saat Anda selesai.

The file structureThe file structureThe file structure

Berikut ini adalah ikhtisar dari setiap file / folder:

  • Folder gambar berisi gambar-gambar berikut:
  • - - tipTip.png - dibuat pada Langkah 2
  • - - tipMid.png - dibuat pada langkah 2
  • - - tipBtm.png - dibuat pada langkah 2
  • index.html - - dibuat pada Langkah 3
  • style.CSS - dibuat pada langkah 3
  • jQuery-1.3.1.min.js - download ini di sini
  • jquery.betterTooltip.js--dibuat di langkah 5

Langkah 1 - pertama, mendapatkan sedikit kreatif

Buka Photoshop atau perangkat lunak Anda pilihan, dan menyiapkan tooltip tampak mengagumkan. Alih-alih merancang
pada latar belakang putih polos, ini dapat membantu untuk menyusun tooltip Anda dengan latar belakang yang mirip dengan situs Anda.
Dengan cara itu akan menyatu dalam mulus. Untuk sebagian besar, tidak ada benar atau salah cara
untuk menyelesaikan langkah ini. Hanya gunakan imajinasi dan kreativitas.

Initial Tooltip DesignInitial Tooltip DesignInitial Tooltip Design

Langkah 2 - iris dan dadu Tooltip Anda

Untuk desain khusus ini, Anda akan perlu untuk tooltip potong 3 gambar yang berbeda. Desain khusus ini akan memerlukan PNG untuk menjaga transparansi.
1) bagian atas. 2) tipis slice 1 piksel yang akan mengulangi vertikal di tengah. 3) bagian bawah. Bagian 4 dari diagram di bawah menunjukkan tiga
potongan-potongan setelah mereka telah dipotong.

Tempatkan file gambar tersebut ke dalam folder bernama "gambar".

Slice up the tooltipSlice up the tooltipSlice up the tooltip

Catatan: Internet Explorer tidak seperti PNG transparansi. Bahkan IE 7 hanya sebagian mendukungnya. Jika Anda menghidupkan
PNG dengan JavaScript, setiap area dengan transparansi akan berubah menjadi hitam sejenak sementara dalam gerakan. Saya menggunakan desain ini
tahu benar itu akan memiliki masalah di IE yang sulit untuk bekerja di sekitar.


Langkah 3 - menulis HTML/CSS Markup

Dengan gambar iris, kita dapat melanjutkan ke HTML dan CSS markup. Ini akan menjadi bagian termudah dari seluruh
Tutorial.

HTML

HTML markup akan segera dipindahkan ke eksternal file JavaScript, jadi hanya ketik ini apa pun
paling nyaman dan dapat disebut kemudian.

Ada tiga tag div. Dua bersarang di dalam orangtua. Div pertama, "tip" akan digunakan untuk menyimpan segala sesuatu bersama-sama
dan menampilkan bagian atas tooltip, tipTop.png.

"tipMid" akhirnya akan mengadakan teks yang akan menampilkan tooltip. Ia juga akan memiliki tipMid.png mengulangi vertikal di dalamnya.

"tipBtm" ada semata-mata untuk menampilkan bagian bawah tooltip, tipBtm.png.

Dalam index.html, menambahkan sekelompok pengisi teks dan beberapa elemen dengan atribut judul mereka diisi. Seperti:

Di kepala index.html, Anda akan perlu untuk link ke stylesheet dan dua file JavaScript.

CSS

CSS digunakan untuk tooltip ini relatif sederhana, hanya Tambahkan baris berikut ke style.css

Mari saya jelaskan di atas.

Pembungkus elemen, .tip, digunakan untuk menyimpan segala sesuatu bersama-sama. Ini memiliki padding atas 37 piksel.
Itu adalah puncak gambar di latar belakang. Padding akan menekan elemen anak untuk mengungkapkan
gambar di belakang. Hotel ini juga memiliki posisi mutlak sehingga kita bisa memindahkannya sekitar di atas halaman
konten.

Dua kelas lain hanya memiliki sebuah gambar latar belakang dan, dalam kasus .topMid, padding untuk memberikan
konten yang akan ditempatkan di dalam, ruang untuk bernapas.


Langkah 4 - mengapa Plugin?

jQuery keren dengan sendirinya. Tapi sihir yang nyata dalam memperluas dengan plugin. Bila Anda meletakkan Anda
kode ke sebuah plugin, Anda sehingga dapat digunakan kembali. Dengan cara itu Anda dapat membangun Perpustakaan kode dan tidak pernah menulis
kode yang sama dua kali.

Berikut adalah tooltip plugin secara keseluruhan:


Langkah 5 - menulis Plugin

Sekarang bahwa Anda telah melihat apa yang tampak seperti kode, saatnya untuk membedah itu.
Untuk memulai, membuat .js file dan nama itu jquery.betterTooltip.js untuk membuatnya sesuai dengan jQuery
standar plugin.

Di dalam .js file, termasuk kode berikut:

Hal ini menciptakan sebuah fungsi umum yang dapat dipanggil dari kepala dokumen atau
lain eksternal .js file. Untuk memanggil plugin Anda, Anda perlu untuk memanggil mengikuti garis dari dalam
$(document) .ready halaman acara.

Baris di atas akan melampirkan plugin untuk setiap elemen dengan nama kelas "tTip". Demikian pula, Anda
bisa pasangkan ke elemen yang Anda pilih.

Mengekspos pengaturan Plugin

Untuk mencegah harus memodifikasi plugin untuk setiap proyek sangat penting untuk memaparkan beberapa
variabel dan pengaturan sehingga mereka dapat men-tweak dari luar plugin sendiri. Tujuan akhir akan
tidak pernah menyentuh plugin, hanya menyesuaikan pengaturannya. Untuk melakukannya, tambahkan baris berikut ke bongkahan yang pertama
Kode:

Hal ini memungkinkan pengaturan "kecepatan" dan "menunda" akan diubah ketika plugin dipanggil seperti ini:

Ini opsional. Jika tidak ditentukan, plugin akan menggunakan nilai default.

Menyuntikkan Tooltip Markup

Ingat bahwa HTML Anda mengetik untuk tooltip? Sekarang akan membuat penampilan resmi.
Dalam chunck ini kode, jQuery "menambahkan" manipulasi konten digunakan untuk menyuntikkan tooltip
segera setelah pembukaan tubuh tag. Dengan cara ini kita dapat memastikan bahwa tooltip
Terletak di atas segalanya.

Fungsi .each $(ini)

Ini adalah salah satu aspek yang paling penting dan berguna jQuery plugin. Fungsi .each $(ini)
Loops melalui masing-masing elemen halaman yang berhubungan dengan plugin ketika itu membangkitkan. Dalam kasus ini memiliki
Semua elemen dengan kelas "tTip". Ketika loop melalui setiap elemen itu berlaku properti dan metode
yang Anda tentukan.

Ini cukup sederhana. Terdiri atas setengah dari sekelompok properti untuk posisi tinggi, lebar, x & y dan
bahkan judul atribut nilai elemen "tTip". Saya menggunakan metode CSS offset() jQuery untuk mengambil posisi teratas dan kiri. Ada juga
hover fungsi yang ditugaskan untuk setiap kelas "tTip" yang memanggil metode pada tikus atas dan keluar. Metode ini akan dijelaskan
lebih lanjut ke dalam tutorial.

Salah satu bagian penting dari fungsi .each $(ini) adalah baris kode di sini yang menghilangkan title atribut:

Seluruh titik tooltip ini adalah untuk menukar generik
tooltip dengan mata penangkapan versi yang lebih baik. Jika Anda tidak menghapus atribut judul, yang browser
menggunakan untuk menghasilkan tooltip generik, Anda akan mendapatkan duel tooltips. Seperti ini:

Avoid duel tooltipsAvoid duel tooltipsAvoid duel tooltips

Delay animasi Fade-in Tooltip

Dua metode ini, setTimer dan stopTimer digunakan untuk membuat penundaan dari ketika pengguna melayang-layang
mereka kursor ke elemen dengan kelas "tTip" dan ketika tooltip membuat penampilan. Ini
penting untuk menghindari mengganggu pengguna. Saya yakin kita semua berbagi frustrasi ketika kita sengaja hover
lebih dari satu iklan tersebut pop-up yang tersembunyi di dalam isi dari situs.

Metode setTimer menciptakan sebuah objek setInterval yang panggilan "showTip()" setelah waktu yang ditentukan telah berlalu.
Agar setInterval ke loop tidak jauh, stopTimer metode ini disebut untuk menghentikan objek setInterval.

Posisi Tooltip

Fungsi hover dalam $(ini) .each loop, yang telah dibuat sebelumnya, panggilan setTip(). Tujuannya adalah untuk posisi
tooltip langsung di atas elemen "tTip". Hal ini dilakukan sebelum animasi memudar.

Tooltip Fade-in animasi

Terakhir tetapi tidak paling, fungsi showTip(). Ini menggunakan jQuery's menghidupkan () UI efek memudar tooltip dalam
Sementara secara bersamaan meluncur menuruni.


Membungkus...

Setelah Anda selesai dan senang dengan hasil Anda, Anda dapat memindahkan plugin Anda dari halaman HTML dasar penuh teks pengisi
dunia nyata dan meletakkannya untuk digunakan.

Ini adalah contoh yang sangat dasar dari sebuah tooltip plugin apa yang dapat Anda lakukan. Menyenangkan bagian sekarang akan membuatnya lebih kuat.
Ada segala macam cara untuk memperluas plugin ini. Peningkatan yang diperlukan akan mendeteksi
Lokasi tooltip dalam hubungannya dengan batas-batas jendela browser dan menampilkan tooltip sesuai jadi
itu tidak mendapatkan memotong.

Terima kasih untuk membaca tutorial ini. Saya berharap hal ini memberi penjelasan tentang bagaimana Anda dapat menggunakan jQuery untuk meningkatkan situs web Anda
antarmuka.

Membiarkan komentar yang mulai! Saya ingin mendengar apa yang Anda pikirkan. Apakah teknik ini benar-benar membantu pengguna mendapatkan sekitar lebih mudah,
atau apakah itu hanyalah gangguan?

  • Berlangganan ke NETTUTS RSS Feed untuk harian web pengembangan tuts dan artikel.


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.