Cara Menggunakan Popover pada Elemen HTML dan Bootstrap 4 – Pada postingan kali ini saya akan membahas tentang Popover pada bootstrap khususnya bootstrap 4. Sebenarnya bootstrap versi sebelumnya juga sama saja dan mungkin pada versi selanjutnya juga. Popover merupakan pop up atau dialog yang muncul sebagai pemberitahuan kepada user atau sekedar catatan yang diberikan kepada user. Ini berguna untuk memperingati user atau sekedar memberikan catatan tentang peraturan yang ada pada aplikasi yang sobat buat.
Seperti yang sudah saya posting sebelumnya yaitu tentang Tooltip, popover ini mirip seperti itu namun lebih kompleks dan lebih enak digunakan jika ingin memberikan catatan dalam jumlah yang banyak. Seperti tooltip, popover juga bisa mengaktifkan HTML jadi sobat bisa memasukkan icon, gambar dan tag HTML lainnya.
Baca Juga :
Menggunakan Tooltip pada HTML dan Bootstrap 4
Cara Menggunakan Popover
Berikut ini adalah cara menggunakan popover pada elemen HTML, tentunya sebelum itu kita harus memasukkan librari bootstrap terlebih dahulu dengan menambahkan baris ini pada tag <head>. Pada contoh karena untuk keperluan demo jadi saya berikan versi onlinenya namun untuk keperluan development sobat harus mendownload terlebih dahulu librari-librarinya atau sobat bisa mendownloadnya bersama project ini di akhir postingan.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Pada kode diatas terdapat juga plugin fontawesome karena nanti pada contoh saya juga akan memberikan contoh tooltip menggunakan icon/gambar. Untuk menggunakan tooltip bisa pada teks, form input seperti input text, select option, radio button, checkbox, gambar, tombol dan lain-lain. Namun untuk menampilkan popover kita perlu kode javascript yang dimasukkan pada tag bosy dan diletekkan paling bawah. Kodenya pada contoh ini adalah seperti dibawah ini
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Namun sobat bisa menggunakan cara lain yaitu dengan nama classnya yaitu seperti dibawah namun sebelumnya pada element kita tambahkan class=”popover”
<script>
$(document).ready(function(){
$('.popover').popover();
});
</script>
Dengan kode diatas semua yang mempunyai elemen pada HTML dengan [data-toggle=”popover”] maka secara otomatis akan memunculkan popover. Ada banyak macam popover yang bisa sobat gunakan dan saya akan menjelaskan satu per satu yaitu
1. Pop Over Standar dengan Judul dan Konten
Pada popover kita bisa menambahkan judul dan konten atau salah satunya saja. Cara penggunaanya adalah sebagai berikut
<button type="button" class="btn btn-primary" data-toggle="popover" title="Judul Popover" data-content="Isi dari popover judul dan konten yang ingin ditampilkan."> Klik untuk memunculkan Popover </button>
Pada contoh diatas saya mencontohkan menggunakan tombol. Seperti yang sudah saya jelaskan di awal, kita memerlukan data-toggle=”popover” untuk memunculkan popover. Sedangkan pada kode title=”Judul Popover” adalah untuk memunculkan judul popover dan pada data-content=”Isi dari popover judul dan konten yang ingin ditampilkan.” adalah untuk mengisikan konten dari popover tersebut. Hasilnya :
2. Dismissible popover
Popover jenis ini tidak bisa hilang walau kita mengekliknya berkali-kali. Jadi selama elemen HTML itu focus maka popup akan selalu muncul karena kita menambahkan kode data-trigger=”focus”. Jadi jika kita menambahkannya pada input text maka popup akan selalu muncul selama user menginput di field yang sedang fokus. Berikut adalah contoh penggunaan keseluruhan
<button type="button" class="btn btn-danger" data-placement="bottom" role="button" data-toggle="popover" data-trigger="focus" title="Judul Popover" data-content="Ini adalah popover yang tidak hilang saat klik tombol berkali-kali."> Dismissible popover </button>
Hasilnya :
3. Popover Aligment
Selain pada tooltip, pada popover juga bisa menambahkan aligment sehingga kita bisa menentukan di sebelah mana popup akan muncul seperti di sebelah kanan, kiri, atas maupun bawah. Berikut adalah contoh penggunaannya
<button type="button" class="btn btn-success" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="Isi dari popover yang ingin ditampilkan di atas."> Popover Atas </button> <button type="button" class="btn btn-primary" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="right" data-content="Isi dari popover yang ingin ditampilkan pada sebelah kanan."> Popover Kanan </button> <button type="button" class="btn btn-danger" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="bottom" data-content="Isi dari popover yang ingin ditampilkan di bawah."> Popover Bawah </button> <button type="button" class="btn btn-warning" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="left" data-content="Isi dari popover yang ingin ditampilkan di sebelah kiri."> Popover Kiri </button>
Hasilnya :
Pada contoh sebelumnya kita menampilkan popover saat diklik, namun pada contoh ini popover akan muncul saat hover yaitu dengan menambahkan data-trigger=”hover”.
4. Popover pada Input Text
Selain pada button popover juga bisa ditampilkan pada input text, contoh penggunaannya adalah sebagai berikut :
<input type="text" name="text" placeholder="Popover pada Input Text" data-container="body" data-toggle="popover" data-placement="right" data-trigger="focus" title="Judul Popover" data-content="Isi dari popover yang ingin ditampilkan pada Input Text.">
Hasil :
5. Popover pada Select Option
Untuk penggunaan popover pada select option adalah sebagai berikut :
<select name="text" data-container="body" data-toggle="popover" data-placement="right" data-trigger="focus" title="Judul Popover" data-content="Isi dari popover yang ingin ditampilkan pada Input Text."> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>
Hasil :
6. Popover pada Radio Button
Untuk penggunaan popover pada radio button adalah sebagai berikut :
<input type="radio" name="radio" data-container="body" data-toggle="popover" data-placement="right" data-trigger="focus" title="Judul Popover" data-content="Isi dari popover yang ingin ditampilkan pada Input Text."> Radio Button
Hasil :
7. Popover pada Checkbox
Untuk penggunaan popover pada checkbox adalah sebagai berikut :
<input type="checkbox" name="checkbox" data-container="body" data-toggle="popover" data-placement="right" data-trigger="focus" title="Judul Popover" data-content="Isi dari popover yang ingin ditampilkan pada Input Text."> Checkbox
Hasil :
8. Popover dengan kode HTML
Pada popover jenis ini kita bisa menambahkan tag HTML seperti italic, bold, underline dan lain-lain. Contoh penggunaanya adalah sebagai berikut :
<button type="button" class="btn btn-success" data-placement="bottom" data-html="true" data-toggle="popover" title="Judul Popover" data-content="<em>Dewan</em> <u>Komputer</u> <b>Popover dengan HTML saat diklik</b> "> Popover HTML </button>
Hasilnya :
9. Popover dengan Icon dan Gambar
Sebenarnya disini sama saja dengan popover HTML. Karena kita bisa menggunakan HTML maka kita bisa memasukkan icon dan gambar. Untuk memasukkan icon dari fontawesome tentunya sobat harus memasukkan terlebih dahulu librari fontawesome seperti yang saya contohkan di awal. Cara penggunaanya adalah sebagai berikut
<button type="button" class="btn btn-info" data-placement="bottom" data-html="true" data-toggle="popover" title="<i class='fa fa-car'></i> Judul Popover <i class='fa fa-car'></i>" data-content="<em>Dewan</em> <u>Komputer</u> <b>Popover dengan HTML saat diklik</b> <img src='dk.png' width='80px;'>"> Popover Dengan Icon dan Gambar </button>
hasil :
Sebenarnya masih banyak kreasi dari popover yang bisa sobat gunakan karena setiap orang mempunyai kreatifitas yang berbeda-beda jadi sobat bisa menggabungkan sesuai keinginan sobat. Saya hanya menjelaskan dasarnya saja. Sekian postingan saya tentang cara Menggunakan Popover pada Elemen HTML dan Bootstrap 4. Jika ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.
Artikel Tentang Bootstrap Lainnya :
Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah
Macam-macam Form Input pada HTML dan Bootstrap
Cara Membuat SweetAlert dan Macam-Macamnya pada PHP
Membuat Bootstrap Modal dan Animasinya pada PHP
Membuat Badges Menggunakan Bootstrap 4
Membuat Alert pada HTML menggunakan Bootstrap 4
Mengenal Bootstrap Typography pada HTML dan Bootstrap 4
Menggunakan Tooltip pada HTML dan Bootstrap 4
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :