Implementasi jQuery → Tooltip

Assalamualaikum, Wr.Wb

A. JUDUL

Implementasi jQuery → Tooltip

B. PENDAHULUAN

1. Pengertian

Jquery Tooltip?

Tooltips dapat dilampirkan ke elemen apapun. Saat Anda mengarahkan elemen dengan mouse Anda, atribut judul ditampilkan di kotak kecil di samping elemen, seperti tooltip asli.

Tapi karena ini bukan tooltip asli, itu bisa ditata. Setiap tema yang dibangun dengan ThemeRoller juga akan menggunakan tooltip yang sesuai.

 
Tooltip menggantikan tooltips asli, menjadikannya themeable dan juga memungkinkan berbagai penyesuaian:

Tampilkan konten lain dari sekedar judul, seperti inline footnotes atau konten tambahan yang diambil melalui Ajax.

Sesuaikan posisi, mis., Untuk memusatkan tooltip di atas elemen.
Tambahkan styling tambahan untuk menyesuaikan tampilan, untuk bidang peringatan atau kesalahan.

2. Latar Belakang

Mengapa Tooltip?

Tooltip juga berguna untuk elemen formulir, untuk menampilkan beberapa informasi tambahan dalam konteks masing-masing bidang.

 

Apa kegunaan dan keunggulan?

Animasi pudar digunakan secara default untuk menampilkan dan menyembunyikan tooltip, membuat tampilan sedikit lebih organik, dibandingkan dengan hanya mengalihkan jarak pandang. mengalihkan jarak pandang. Ini bisa disesuaikan dengan pilihan show dan hide.

 

3. Maksud danTujuan

• Untuk memperjelas suatu gambar
• Menambah deskripsi mengenai kata/gambar penting

4. Hasil yang Diharapkan

• Pada gambar atau kalimat yang penting akan terdapt tooltip yang berisi deskripsi lebih lengkap.

C. ALAT dan BAHAN

• Laptop
• Browser
• Text Editor

D. JANGKA WAKTU

2 jam

E. LANGKAH-LANGKAH

1. Menyiapkan pekerjaan yang kemarin untuk mengimplementasikan target yang akan diterapkan hari ini kedalamnya.

2. Menyiapkan kebutuhan berupa tooltip.js

3. Meentukan element yang akan kita beri tooltip pada web yang kita buat

4. Menuliskan script yang akan mengeksekusi element yang telah ditentukan tadi.

5. Dilihat melalui browser

F. HASIL yang DIDAPAT

Hasil yang saya dapat seperti di bawah ini

G. PENEMUAN PERMASALAHAN

Pada penambahan element tooltips, latar tooltip tidak ada. Seperti pada gambar berikut.
Diatas kepada gambar ketiga.

Ternyata letak kesalahan saya pada css yang saya buat.

H. KESIMPULAN

Dengan tooltip kita bisa lebih mudah untuk memberi keterangan. Berupa keterangan dari gambar ataupun keterangan dari kata atau kalimat.

I. REFERENSI

• Buku Bikin Website Super Keren dengan PHP dan jQuery oleh Lukmanul Hakim
• https://jqueryui.com/tooltip/
• http://api.jqueryui.com/tooltip/

Wassalamualaikum, Wr.Wb