Bagi kalian yang tidak ingin repot membuat fitur tampilan yang menarik, kalian bisa menggunakan library dari luar seperti halnya JqueryUI. JqueryUI menyediakan beberapa fitur tampilan yang dapat berinteraksi dengan penggunanya secara langsung pada saat itu juga. Salah satu fitur yang ada pada JqueryUI adalah Tooltip. Tooltip ini adalah untuk memberikan informasi tambahan pada suatu objek ketika kalian mengarahkan mouse ke objek tersebut.
Sesuai dengan pembahasan diatas, maka kali ini kita akan belajar membuat tooltip dengan JqueryUI. Hal yang perlu diperhatikan adalah tentunya kalian harus sudah bisa menggunakan HTML dan CSS secara fasih dan sedikit pengetahuan tentang Javascript. Untuk membuat Tooltip dari JqueryUI lebih mudah dibandingkan kita buat dari awal. Namun untuk membuat tooltip tersebut kalian harus sering membaca dokumentasinya pada website dalam langkah pembuatan fitur apa saja yang ada dalam JqueryUI. Karena sudah ada ketentuan-ketentuan baku yang harus kalian ikuti agar fitur tersebut dapat berjalan dengan lanca.
Oke sekarang kalian bisa mulai prakteknya, kalian bisa ikuti contoh code dibawah ini.
tooltip.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <meta charset="UTF-8"> <title>Tooltip</title> <link href = "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel = "stylesheet"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( document ).tooltip(); } ); </script> <style> label { display: inline-block; width: 5em; } </style> </head> <body> <p title="ini adalah tooltip">Ini adalah Kalimat</p> </body> </html> |
Setelah itu kalian simpan filenya dengan format .html. Kalian bisa lihat hasilnya lewat browser kalian. Jika berhasil maka hasilnya akan seperti pada link ini (codepen).
Kira-kira seperti itu hasilnya, ketika kalian menghover salah satu objek yang disisipi fungsi tooltip, maka informasi yang telah kita setting akan muncul saat disorot oleh mouse kalian. Fungsi tooltip ini tidak hanya untuk menampilkan informasi berupa text saja, melainkan bisa gambar atau google map. Tentunya untuk membuat fitur tersebut kalian harus memodifikasi dengan panduan dokumentasi dari JqueryUI. Kalian bisa mengoprek lebih dalam disesuaikan kebutuhan website kalian.
Sekian pembahasan mengenai cara membuat tooltip dengan JqueryUI. Semoga bermanfaat untuk kalian semua. Terimakasih.