Apakah kalian tahu tooltip itu apa..?

Tooltip di dalam dunia website merupakan sebuah info kepada user untuk memberitahukan apa saja yang harus di isi, pada kesempatan kali ini saya akan memberikan tips dan trik tentang bagaimana Cara Membuat Tooltip Dengan Jquery UI dimana sebuah tooltip yang nanti kita akan berikan pada form input, dengan menggunakan Jquery UI akan sangat mudah dan cepat pembuatannya. Tooltip juga bisa di buat dengan css biasa namun untuk pembuatannya akan sangat memakan waktu, dengan Jquery UI ini kita perlu sedikit custom saja karna memang Jquery ini kita tinggal panggil saja library nya. Baik, di bawah ini adalah screen shoot yang nanti kita akan buat.

Cara Membuat Tooltip Dengan Jquery UI

Bisa kalian lihat pada gambar di atas ini, begitu cursor di arahkan pada form input tooltip akan aktif dan muncul notifikasi. Oke sekarang kita akan implementasikan Cara Membuat Tooltip Dengan Jquery UI, seperti biasa teman – teman siapkan text editornya dan copy script html nya di bawah ini.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cara Membuat Tooltip Dengan Jquery UI</title>
</head>
<body>
	<table>
		<form>
			<tr>
				<td><label for="email">Email</label></td>
				<td>:</td>
				<td><input type="email" id="email" title="Masukkan Email"></td>
			</tr>
			<tr></tr>
			<tr></tr>
			<tr></tr>
			<tr>
				<td><label for="password">Pasword</label></td>
				<td>:</td>
				<td><input type="password" id="password" title="Isikan Angka, huruf dan Simbol"></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td><input type="submit" value="Login"></td>
			</tr>
		</form>
	</table>

</body>
</html>

Kemudian save dengan tooltip.html, langkah berikutnya tambahkan css nya. Teman – teman bisa copy script css nya di bawah ini

  <style>
	  label {display: inline-block; width: 50px;}
	  tr{margin-bottom: 50px;}
	  input{padding: 10px; width: 250px; margin-bottom: 10px}
	  title{float: right;}
	  input[type=submit]{width: 200px}
  </style>

Pastekan di dalam tag <head>, berikutnya kita akan memberikan Jquery UI nya. Jangan lupa library Jquery dan Jquery UI nya

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <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>

Jika sudah, tambahkan fungsi ini

Cara Membuat Tooltip Dengan Jquery UI

Kemudian save dan jalankan pada browser nya, maka hasilnya seperti gambar di bawah ini

Cara Membuat Tooltip Dengan Jquery UI

Bagaimana, sangat mudah bukan,,??

Oke cukup sekian dulu pada artikel kali ini tentang Cara Membuat Tooltip Dengan Jquery UI, kita berjumpa lagi di tutorial berikutnya. Semoga bermanfaat.

Terima Kasih dan Sampai Jumpa 🙂