#JQuery UI

JQuery UI Part 11 : Membuat Tooltip Dengan JQuery UI

By Diki Alfarabi Hadi
10 February 2016
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.

<!DOCTYPE html>

<html>

<head>

<title>JQuery UI Part 11 : Membuat Tooltip Dengan JQuery UI</title>

</head>

<body>

<h1>Membuat Tooltip Dengan JQuery UI | www.malasngoding.com</h1>

<p>Letakkan cursor pointer pada form untuk memunculkan tooltip</p>

<p>

<br/>

<br/>

<label for="alamat">Alamat:</label>

<br/>

</p>

</body>

$(document).ready(function(){

$( document ).tooltip();

});

</script>

</html>

style.css

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.

<br/>

<br/>

<label for="alamat">Alamat:</label>

<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

$(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.

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.