JQuery UI Part 11 : Membuat Tooltip Dengan JQuery UI

Membuat Tooltip Dengan JQuery UI
Membuat Tooltip Dengan JQuery UI – Sampai sudah di tutorial jquery ui part 11. tutorial ini merupakan tutorial jquery ui terakhir yang membahas tentang widget Pada JQuery UI. dan selanjutnya pada part 12 kita akan masuk ke tutorial interaksi pada jquery ui. seperti misalnya membuat resizeable, dragable, dropable dan lainnya. setelah mempelajari interactial pada jquery ui selanjutnya akan kita lanjutkan dengan beberapa effect pada jquery ui.
Sesuai dengan judul tutorial ini. membuat tooltip dengan jquery ui. maka kita akan belajar membuat tooltip dengan menggunakan jquery ui. pasti teman-teman sudah tau apa itu tooltip. bagi teman-teman yang belum tau, tootltip adalah sebuah pop up yang muncul pada element tertentu saat pointer cursor di letakkan di atas element tersebut. pop up yang muncul biasanya berupa penjelasan tentang element yang di hover oleh user.
Cara Membuat Tooltip dengan jquery ui
untuk cara membuat tooltip dengan jquery ui caranya sangat mudah. karena jquery ui sudah menyediakan fungsi khusus untuk membuat tooltip. sama seperti widget lainnya pada jquery ui. baiklah silahkan simak penjelasan berikut ini tentang cara membuat tooltip dengan jquery ui. di sini saya aka meletakkan tooltip pada form inputan. jadi ketika user meletakkan cursor pada pointer ketika ingin mengisi form akan muncul pesan pada tooltipe.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <title>JQuery UI Part 11 : Membuat Tooltip Dengan JQuery UI</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Membuat Tooltip Dengan JQuery UI | www.malasngoding.com</h1> <p>Letakkan cursor pointer pada form untuk memunculkan tooltip</p> <p> <label for="nama">Nama:</label> <input id="nama" title="Masukkan nama anda."> <br/> <br/> <label for="usia">Usia:</label> <input id="usia" title="Masukkan usia anda."> <br/> <br/> <label for="alamat">Alamat:</label> <input id="alamat" title="Masukkan alamat anda."> <br/> <br/> </p> </body> <script type="text/javascript"> $(document).ready(function(){ $( document ).tooltip(); }); </script> </html> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 |
body{ font-family: sans-serif; } h1{ text-align: center; } label { display: inline-block; width: 5em; } |
jadi di sini pertama yang harus di lakukan adalah kita buat dulu form nya dengan format berikut untuk membuat tooltip.
1 2 3 4 5 6 7 8 9 10 11 12 |
<label for="nama">Nama:</label> <input id="nama" title="Masukkan nama anda."> <br/> <br/> <label for="usia">Usia:</label> <input id="usia" title="Masukkan usia anda."> <br/> <br/> <label for="alamat">Alamat:</label> <input id="alamat" title="Masukkan alamat anda."> <br/> <br/> |
perhatikan pada syntax di atas. pesan yang ingin kita tampilkan pada tooltipnya kita letakkan pada atribut title.
kemudian tinggal berikan fungsi tooltip() jquery ui. Membuat Tooltip Dengan JQuery UI
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function(){ $( document ).tooltip(); }); </script> |

membuat tooltip dengan jquery ui
dan widget tooltip jquery ui pun selesai kita buat.
See the Pen Membuat widget tooltip dengan jquery ui by Malas Ngoding (@malasngoding) on CodePen.0
Sekian lah tutorial jquery ui part 11 : membuat tooltip dengan jquery ui. semoga dapat bermanfaat. jika ada yang kurang di mengerti teman-teman bisa meninggalkan komentar di bawah artikel ini.
Tutorial Menarik Lainnya

JQuery UI Part 15 : Interaksi Selectable dan Sortable di JQuery UI


JQuery UI Part 14 : Membuat Resizable Dengan JQuery UI


JQuery Part 13 : Membuat Interaksi Droppable Dengan JQuery UI

