السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
apa kabar semua ? ^_^
semoga sehat semua yah, dan masih semangat untuk belajar coding nya heheh ^_^
Tutorial kali ini hampir sama dengan tutorial yang lalu yaitu Cara Membuat Tooltip, namun pda tutorial yang lalu saya hanya memberikan tutorial Cara Membuat Tooltip Dengan CSS
Sedangkan pada hari ini saya ingin memerikan tutorial Cara Membuat Tooltip Dengan BOOTSTRAP
Kalian pasti pada tau kan apa itu tooltip ? Ya. Tooltip adalah sebuah dialog kecil yang muncul ketika pointer mouse di arahkan ke sebuah elemen atau biasa di sebut ( Hover ).Tutorial kali ini hampir sama dengan tutorial yang lalu yaitu Cara Membuat Tooltip, namun pda tutorial yang lalu saya hanya memberikan tutorial Cara Membuat Tooltip Dengan CSS
Sedangkan pada hari ini saya ingin memerikan tutorial Cara Membuat Tooltip Dengan BOOTSTRAP
Oke langsung saja di simak tutorial Cara Membuat Tooltip Dengan BOOTSTRAP
1. Membuat File HTML
seperti biasa silahkan anda siapkan file HTML bernama index.html, lalu ketikkan script berikut ini .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<h3>Contoh Tooltip</h3>
<p>Contoh Tooltip Dengan 4 Posisi</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Ini Tooltip!">Atas</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Ini Tooltip!">Bawah</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Ini Tooltip!">Kiri</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Ini Tooltip!">Kanan</a></li>
</ul>
</div>
</body>
</html>
coba deh anda jalankan telebih dulu file htmlnya. .
ya benar hasilkan akan hanya berupa teks saja dan belum ada style maupun tooltip itu di karenakan kita belum membuat file cssnya, Silahkan ikuti langkah selanjutnya
2. Menambahkan BOOTSTRAP
Disini kita kan menambahkan link menuju bootstrap, dan jangan lupa tambahkan juga link menuju jquery, silahkan tambahkan script di bawah ini di bawah tag <meta> dan sebelum tag </head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
coba anda jalankan lagi file htmlnya .
sudah terlihat stylenya kan :D, dan coba arahkan mouse ke link yang ada. .
benar tooltip belum muncul atau terlihat, itu dikarenakan kita belum menambahkan sedikit script javascript /jquery silahkan anda tambahkan script jquery di bawah ini sesudah tag </div> dan sebelum tag</body>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script> jika anda mengikuti tutorial ini dengan benar maka script akhirnya akan seperti ini
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Contoh Tooltip</h3>
<p>Contoh Tooltip Dengan 4 Posisi</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Ini Tooltip!">Atas</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Ini Tooltip!">Bawah</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Ini Tooltip!">Kiri</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Ini Tooltip!">Kanan</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Coba deh anda jalankan file htmlnya dan anda lihat apa yang terjadi di browser anda :D
Bagaimana, mudah bukan :D
Silahkan anda coba dan kembangkan sesuka hati anda :D
mungkin itu dulu yang dapat saya sampaikan, :)
semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D
