Sudah lama gag nulis di blog ini, oke kali ini saya akan menjelaskan cara membuat Tooltip keren dengan menggunakan bootstrap. Bootstrap udah pada taukan brosis.?? yaitu framework css yang memudahkan kita dalam membuat suatu website sehingga lebih cepat selesai karena kita tinggal panggil saya scriptnya tanpa harus ngoding dari awal.. langsung saja kita akan buat tooltip seperti gambar dibawah ini
- Buat sebuah halaman html dengan nama tooltip.html misalnya lalu copas kode berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Twitter Bootstrap 4 Tooltip Placement</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
<script src="bootstrap/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tip-top").tooltip({
placement : 'top'
});
$(".tip-right").tooltip({
placement : 'right'
});
$(".tip-bottom").tooltip({
placement : 'bottom'
});
$(".tip-left").tooltip({
placement : 'left'
});
});
</script>
<style type="text/css">
.bs-example{
margin:100px auto;
width:400px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="tooltip-examples list-inline">
<li><a href="#" data-toggle="tooltip" class="tip-top" data-original-title="Tooltip Diatas">Tooltip Atas</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-right" data-original-title="Tooltip Kanan">Tooltip Kanan</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-bottom" data-original-title="Tooltip Dibawah">Tooltip Bawah</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-left" data-original-title="Tooltip Dikiri">Tooltip Kiri</a></li>
</ul>
</div>
</body>
</html>
- Simpan satu folder dengan bootstrap bila belum punya silahkan download di http://www.getbootstrap.com
- Buat folder tooltip misalnya atau terserah anda kemudian simpan file tooltip.html dan folder bootstrap ke dalam folder tooltip.
- Silahkan buka file tooltip.html di browser maka akan nampak tampilan seperti gambar diatas.
Untuk source code lengkap dapat di download di http://www.4shared.com, selamat mencoba.
Happy Programming
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
