Pada tutorial kali ini saya akan mengajarkan bagaimana cara penggunaan Popover pada bootstrap. Popover ini hampir mirip sekali dengan tooltip, yaitu untuk menampilkan pesan yang terdapat judulnya. Namun yang membedakan dengan tooltip adalah penggunaan popover harus dengan mengklik tombol atau kalimat tersebut, sedangkan tooltip kalian hanya mengarahkan kursor ke tombol atau kalimat tersebut maka akan muncul tooltip tersebut. Cara menggunakanya sangatlah mudah, kalian bisa ikuti langkah-langkah nya dibawah ini.
Pertama , buat file dengan nama popover_bootstrap.html . Kemudian ketikkan script di bawah ini ke dalam file popover_bootstrap.html
<!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=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
</head>
<body>
<div class=”container”>
<h3>Popover Example</h3>
<ul class=”list-inline”>
<li><a href=”#” title=”Header” data-toggle=”popover” data-placement=”top” data-content=”Content”>Top</a></li>
<li><a href=”#” title=”Header” data-toggle=”popover” data-placement=”bottom” data-content=”Content”>Bottom</a></li>
<li><a href=”#” title=”Header” data-toggle=”popover” data-placement=”left” data-content=”Content”>Left</a></li>
<li><a href=”#” title=”Header” data-toggle=”popover” data-placement=”right” data-content=”Content”>Right</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$(‘[data-toggle=”popover”]’).popover();
});
</script>
Maka saat file di jalankan di brower , tampilan nya seperti di bawah ini
Saat tombol “Top” di klik maka akan muncul popover di sebelah atas tombol “Top”
Begitupun untuk tombol bootom , left dan right , maka akan muncul popover di sebelah bawah , kiri dan kanan dari tombol .
Sekian tutrial dari saya, semoga dapat bermanfaat bagi teman-teman dan selamat mencoba .
Created By : Muhammad Bashir
