Bagaimana Cara Membuat Popover Pada Bootstrap
Di artikel kali ini saya akan membahas mengenai bagaimana cara membangun popover di bootstrap , bagi tahu caranya silahkan membaca penjelasan dan caranya di bawah ini :
Halo semuanya jumpa lagi di artikel Source Code Aplikasi, kali ini saya akan membahas mengenai bootstrap dan sesuai judulnya saya akan membahas bagaimana cara membangun popover di bootstrap.
Apa itu popover di bootstrap ?
Kalau menurut saya popover yaitu sebuah plugin di bootstrap dengan menggunakan bahasa javascript bagi membangun sebuah popup dialog saaat suatu element <a> di tekan. nah kira-kira seperti ini tampilanya :
nah lalu bagaimana cara membuatnya ? silahkan kalian salin code berikut :
<!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.1.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>
<a href=# data-toggle=popover title=Bagaimana Cara Membangun Popover Di Bootstrap data-content=Some content inside the popover>Toggle popover</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle=popover]').popover();
});
</script>
</body>
</html>
di sini saya menggunakan bootstrap cdn ya teman-teman, nanti silahkan kalian konfigurasi sendiri kalau menggunakan bootstrap dari getbootstrap.com.
oke seperti begitulah bagaimana cara membangun popover di bootstrap , gampang bukan ?
silahkan di praktekan di kasusnya sendiri-sendiri, dan semoga bermanfaat.
Sumber https://kursuswebsite.org
