Halo selamat datang kembali pada tips dan trik seputar dunia website, pada pertemuan sebelumnya kita sudah belajar tentang Autocomplete Categories. Dan pada pertemuan kali ini saya akan memberikan tips dan trik tentang Macam – macam Tooltip Dengan jQuery UI, dimana kita akan mengenal 3 fungsi tooltip yang mana ke 3 nya ini memiliki efek yang berbeda dan dapat kita pakai pada text atau menu untuk memberitahukan user jika di klik akan mengarah ke halaman lain. Dan pada latihan kali ini saya memberikan contoh yang sederhana dimana kita akan membuat sebuah link kemudian jika mouse di arahkan pada text tooltip akan memberitahukan back link yang ada di text tersebut. Di bawah ini adalah type tooltip yang nanti kita akan buat
Tootip:
- slideDown
- explode
- position
Langsung saja kita praktekkan Macam – macam Tooltip Dengan jQuery UI, teman – teman siapkan text editornya kemudian ketikkan script html nya seperti gambar di bawah ini
Pastekan pada text editornya dan save dengan nama index.html, selanjutnya kita load library jQuery dan jQuery UI nya
<p><link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></p><p><script src="https://code.jquery.com/jquery-1.12.4.js"></script></p><p><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script></p><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>
Kita berikan css nya
a{border: 1px solid red; padding: 5px 10px}
Dan masukkan script jQuery nya di bawah ini
<p><script></p><p> $( function() {</p><p> $( "#show-option" ).tooltip({</p><p> show: {</p><p> effect: "slideDown",</p><p> delay: 250</p><p> }</p><p> });</p><p> $( "#hide-option" ).tooltip({</p><p> hide: {</p><p> effect: "explode",</p><p> delay: 250</p><p> }</p><p> });</p><p> $( "#open-event" ).tooltip({</p><p> show: null,</p><p> position: {</p><p> my: "left top",</p><p> at: "left bottom"</p><p> },</p><p> open: function( event, ui ) {</p><p> ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );</p><p> }</p><p> });</p><p> } );</p><p> </script></p><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>
Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini
Teman – teman arahkan mouse pada setiap masing – masing fungsi tooltip nya, nanti teman – teman akan melihat hasil dari beberapa macam tooltip nya. Inilah beberapa tooltip yang ada pada jQuery UI, hasilnya cukup menarik sekali dan bisa di implementasikan di project website teman – teman. Saya rasa sekian pada artikel kali ini tentang Macam – macam Tooltip Dengan jQuery UI. Kita berjumpa kembali pada artikel yang akan datang, semoga bermanfaat. Terimakasih dan sampai jumpa.