Hallo teman-teman pada tutorial kali ini saya akan menjelaskan tentang Cara Menerapkan Popover Pada Bootstrap, teman-teman tau apa itu popover, atau dengan Bahasa kita sehari hari ialah tampilan atau keterangan untuk mengisikan sebuah data, ketika form input kita klik maka akan menampilkan alert atau tanda pengumuman tentang cara mengisi atau tentang apa yang harus diisi seperti ini contohnya :
Nah sudah tau yah popover itu apa, sudah saya tampilkan juga contohnya, dan berikut adalah bagaimana kita mengimplementasikannya menggunakan plugin dari bootstrap, oke langsung saja tidak perlu berlama lama, teman-teman bisa salinkan scriptnya dibawah sini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <title>Simple PopOver</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>Simple PopOver Bootstrap</h3> <input type="text" name="text" class="form-control" data-toggle="popover" title="Popover Header" data-content="Silahkan Isi Nama Anda" placeholder="Masukkan Nama Anda.."> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> </body> </html> |
Jika sudah disave dan jalankan dibrowsernya, cukup mudah bukan, sekian tutorial tentang Cara Menerapkan Popover Pada Bootstrap. Sampai bertemu diartikel selanjutnya dan sampai jumpa.
#KeepLearn
#IsmetMA