Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements

Cara Membuat Tautan Tooltips Menggunakan CSS3 dan JQuery

by
Length:MediumLanguages:

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

Kami baru-baru ini memposting tutorial tentang cara membuat tooltips CSS3 bebas-skrip ... Hari ini, kami memposting versi yang disempurnakan dengan script yang ramah SEO dan menggunakan sedikit sihir jQuery untuk membuatnya hidup dengan sendirinya ke posisi mouse!

Tooltips digunakan untuk menampilkan informasi tambahan ketika sebuah tautan digerakkan. Ketika kami membuat tautan di situs web kami, itu selalu merupakan praktik yang baik untuk menambahkan judul ke tautan untuk kepentingan SEO. Judul-judul ini ditampilkan ketika Anda mengarahkan kursor ke tautan tetapi tidak memiliki merek atau styling kustom. Dalam tutorial ini saya akan memandu Anda melalui proses:

  • Membuat bentuk tooltip menggunakan CSS3 murni tanpa menggunakan gambar apa pun
  • Gunakan JQuery untuk menampilkan tooltip saat tautan melayang
  • Setel konten tooltip ke judul tautan
  • Hidupkan tooltip
  • Tampilkan relatif terhadap posisi mouse

Dengan cara ini kami akan meningkatkan pengalaman pengguna dan pada saat yang sama kami menjaga semuanya tetap bagus dan bersih untuk manfaat mesin pencari dan SEO.


Langkah 1: Menambahkan Markup HTML

Marker Header

Mari kita mulai dengan terlebih dahulu menambahkan markup di dalam head dokumen kita. Kami menambahkan dua style sheet:
"style.css" dan "tooltips.css". Anda dapat menghapus yang terakhir ketika Anda ingin mengimplementasikan pekerjaan Anda sendiri, tetapi kami akan menggunakannya dalam demo. Lembar gaya
"style.css" berisi semua gaya CSS yang akan memformat tooltips kami. Kami juga telah menambahkan referensi perpustakaan Javascript JQuery. Sekarang inilah head markup  dokumen kami.

Tautan dengan Markup Tooltips

Sekarang kita perlu menambahkan markup untuk tautan dengan tooltips. Dalam pendekatan saya untuk membuat tautan untuk menampilkan tooltips, kita perlu untuk menambahkan tautan dengan atribut class.
"tooltip_link". Ini akan memberi style pada tooltip dasar dan kami menambahkan nama class tambahan dari keduanya
"left", "center" atau "right" untuk menentukan posisi panah tooltip masing-masing sejajar dengan kiri bawah, tengah atau kanan. Akhirnya, kami menambahkan beberapa titles ke tautan yang akan ditampilkan. Sekarang inilah markup tautannya.

Markup Tooltips

Sekarang kita perlu menentukan bagaimana markup tooltip nantinya jadi kita dapat mendasarkan gaya dan pengkodean berdasarkan itu. Kami akan menggunakan dasar
"div" tag dengan atribut class "tooltip" dan salah satu dari nama class ini
"left", "center" atau "right". Di dalamnya, kita akan menempatkan teks dari tooltip. Sekarang inilah markup tooltip.


Langkah 2: Styling Tooltips dengan CSS

Pertama, kita mulai dengan menata tautan itu sendiri dengan mengatur posisinya menjadi "relative" sehingga kita dapat menempatkan ujung tooltip relatif terhadap tautan tersebut.

Styling Tooltip Dasar

Sekarang kita perlu menambahkan gaya CSS untuk tooltip dasar yang akan kita gunakan nama classnya
"tooltip". Kita perlu menyembunyikan tooltip sehingga dapat ditampilkan menggunakan JQuery ketika tautan di-hover, aturlah posisi ke
"absolut" sehingga kita dapat mengatur posisi relatif terhadap tautan itu sendiri, mengatur lebar ke
200px, padding 5px, margin bawah
12px untuk membuat ruang untuk panah, mengatur warna teks menjadi white, z-index menjadi
100 berada di atas semua konten, 100% dari bottom, mengatur warna latar belakang menjadi
transparent warna biru dengan beberapa gaya font dan teks.

Ingatlah bahwa Anda dapat mengubah gaya menjadi apa pun yang Anda inginkan, demo akan menggunakan gaya visual yang sengaja dibuat sederhana demi kesederhanaan

Mari kita tambahkan gaya umum untuk panah tooltip dengan menggunakan elemen pseudo
"after" dan "before". Kami memberi gaya pada elemen puesdo "after" yang akan membentuk panah penuh dari kiri dan kanan dan setengah dari panah di tengah tooltip dengan mengaturnya agar tidak memiliki konten, posisi absolut, mengatur warna perbatasan sama seperti yang kami gunakan untuk latar belakang tooltip dengan lebar penuh dan
"-14px" dari bawah tooltip. Elemen pseudo "before" memiliki gaya yang hampir sama dengan
"after" elemen pseudo

Styling Tooltips Panah Kiri, Tengah dan Kanan

Untuk gaya tooltip dengan panah kiri kita menggunakan class "left" kita gaya class dengan jari-jari perbatasan dari semua sudut kecuali yang ada di kiri bawah, kemudian kita gaya perbatasan kiri dan posisi dari paling kiri untuk "after" elemen puesdo. Untuk panah kanan, kami hanya mengubah radius batas dan mengatur batas kanan dan memposisikannya dari kanan. Tooltip panah tengah kita akan mengatur radius perbatasan ke semua sudut, sekarang di sini kita perlu gaya keduanya
"after" dan "before" elemen pseudo. Itu
"after" pseudo element memiliki batas kiri dengan 50% dari lebar dan
50% dari kiri, "before" element puesdo memiliki batas kanan dan batas bawah transparan, dengan
50% dari lebar dan 50% dari kanan.


Langkah 3: Menampilkan, Animasi dan Menempatkan Konten menggunakan JQuery

Untuk mendapatkan fungsionalitas yang diinginkan, kita perlu menambahkan kode JQuery kita di dalam tag skrip sebelum tag tubuh penutup. Kami akan menggunakan mouse event untuk menentukan fungsionalitas yang ingin kami buat.

Pada Mouse Enter Event

"mouseenter" even menyala ketika kursor mouse memasuki bagian mana pun dari elemen yang dimaksud yang mana dalam hal ini adalah
"a" atau elemen tautan, ini hanya akan berfungsi ketika tautan memiliki lebih dari nol karakter dalam atribut judul. Di sini kita perlu melakukan hal berikut:

  1. Dapatkan bagian atribut nama class yang akan menentukan tampilan tooltip (panah kiri, tengah atau kanan).
  2. Dapatkan posisi kursor mouse X relatif terhadap tautan, bukan halamannya.
  3. Dapatkan atribut "title" untuk ditampilkan di dalam tooltip.
  4. Tambahkan markup dari tooltip. Kemudian kami akan menambahkan nama class dan judul yang kami dapatkan sebelumnya.
  5. Atur posisi tooltip dari kiri tergantung pada nama class tooltip (panah kiri, tengah atau kanan).
  6. Akhirnya, kita akan menampilkan tooltip dengan menggunakan fade dalam animasi yang akan mengatur properti tampilan tooltip ke
    "block" dan gunakan durasi animasi 300 milidetik.

Pada Mouse Leave Event

"mouseleave" even menyala ketika kursor mouse meninggalkan 
"a" atau elemen tautan. Dalam atribut ini kita hanya akan membalikkan semua yang telah kita lakukan dalam
"mouseenter" event. Kita akan mendapatkan bagian atribut nama class dari tautan, lalu kita akan memudar tooltip yang akan mengatur properti tampilan menjadi
"none" dan gunakan durasi animasi 300 ms, maka kita harus menunda fungsi selanjutnya untuk
300 ms hingga animasi fade out berakhir. Sekarang untuk menghapus markup tooltip kita harus memasukkannya ke dalam antrian khusus dan kemudian kita harus mengakhiri antrian kita dengan menggunakan
"dequeue"  fungsiyang memungkinkan antrian utama tetap berjalan.


Kesimpulan

Sekarang hasil akhir Anda akan terlihat seperti gambar di bawah ini. Agar hasil akhir Anda terlihat persis seperti demo kami, Anda harus menggunakan gaya di dalamnya
"tut.css", tetapi jangan ragu untuk menambahkan penyesuaian Anda sendiri.

Link Tooltips Using CSS3 and JQuery Final Preview

Saya harap Anda telah mempelajari beberapa teknik dari tutorial CSS dan JQuery kami! Bagikan pemikiran Anda di bawah ini :)

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.