Menggunakan Popover pada Elemen HTML dan Bootstrap 4

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.

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

Namun sobat bisa menggunakan cara lain yaitu dengan nama classnya yaitu seperti dibawah namun sebelumnya pada element kita tambahkan class=”popover”

 

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

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

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

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 :

Hasil :

 

5. Popover pada Select Option

Untuk penggunaan popover pada select option adalah sebagai berikut :

Hasil :

 

6. Popover pada Radio Button

Untuk penggunaan popover pada radio button adalah sebagai berikut :

Hasil :

 

7. Popover pada Checkbox

Untuk penggunaan popover pada checkbox adalah sebagai berikut :

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 :

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

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 :

Sampai jumpa pada postingan saya selanjutnya..

Leave a Reply

Your email address will not be published. Required fields are marked *

seventeen − seventeen =