bagaimana cara membuat popover pada bootstrap

Pada artikel kali ini saya akan membahas tentang bagaimana cara membuat popover pada bootstrap , untuk tahu caranya silahkan membaca penjelasan dan caranya di bawah ini :

Hai semuanya jumpa lagi di artikel dumetschool, kali ini saya akan membahas tentang bootstrap dan sesuai judulnya saya akan membahas bagaimana cara membuat popover pada bootstrap.

Apa itu popover pada bootstrap ?

Kalau menurut saya popover adalah sebuah plugin pada bootstrap dengan menggunakan bahasa javascript untuk membuat 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="Popover Header" 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 itulah bagaimana cara membuat popover pada bootstrap , mudah bukan ?

silahkan di praktekan pada kasusnya sendiri-sendiri, dan semoga bermanfaat.

Bagaimana Cara Membuat Popover Pada Bootstrap

Kategori