Menggunakan Tooltip pada HTML dan Bootstrap 4

Menggunakan Tooltip pada HTML dan Bootstrap 4 – Pada kesempatan kali ini saya akan memposting tentang cara memasang/menggunakan tooltip pada HTML baik itu di form input, tombol, atau link. Tooltip sendiri adalah seperti pesan atau pemberitahuan yang akan muncul saat user hover atau fokus pada suatu element pada HTML. Ada banyak fitur yang bisa digunakan dalam Bootstrap. Ada juga yang mirip dengan tooltip ini yaitu popover namun lebih kompleks yang sobat bisa lihat pada postingan saya lainnya.

Cara Membuat Tooltip pada HTML

Berikut ini adalah cara menggunakan tooltip, 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. Berikut adalah contoh penggunaan tooltip pada link. Namun sebelum itu sobat perlu menuliskan pada tag <script>…</script> dengan kode dibawah ini

Kode diatas merupakan cara menampilkan tooltip dengan hover namun jika ingin menampilkan saat diklik bisa gunakan cara ini

Pada kode $(“#tooltip”) merupakan id dari element yang ingin ditampilkan tooltipnya.

 

1. Tooltip pada link

Untuk menampilkan tooltip bisa di atas, kanan, kiri dan bawah. Contoh pada link adalah sebagai berikut

Hasilnya :

 

2. Tooltip pada Button

Pada tombol/button juga bisa menampilkannya di sebelah kanan, kiri, atas ataupun bawah. Caranya adalah seperti berikut

Hasilnya :

 

3. Tooltip pada Input Text

Berikut adalah contoh cara penggunaan tooltip pada input text :

Hasilnya

 

4. Tooltip pada Select Option

Berikut adalah contoh cara penggunaan tooltip pada select option :

Hasilnya :

 

5. Tooltip pada Radio Button

Berikut adalah contoh cara penggunaan tooltip pada radio button :

Hasilnya :

 

6. Tooltip pada Checkbox

Berikut adalah contoh cara penggunaan tooltip pada checkbox :

Hasilnya :

 

7. Tooltip pada Paragraf

Berikut adalah contoh cara penggunaan tooltip pada paragraf :

Hasilnya :

8. Tooltip isinya dengan HTML

Berikut adalah contoh cara penggunaan tooltip dengan pesan menggunakan kode HTML. Karena dengan kode HTML kita bisa menambahkan Icon/gambar dan tag HTML lainnya :

Hasilnya :

Contoh membuat tooltip menggunakan Gambar

Hasilnya :

9. Tooltip dengan event Click

Ini sama saja dengan contoh diatas yang tooltip dengan gambar didalamnya. Berikut cara menampilkan tooltip saat diklik

Seperti yang terlihat, sebelumnya saat memunculkan tooltip dengan hover kita menggunakan kode data-toggle=”tooltip” dan saat menggunakan event click maka kita menggunakan id=”tooltip” dengan id bisa sobat isikan apa saja, yang penting nanti pada tag <script> diganti dengan nama idnya yaitu kodenya sebagai berikut

 

Sekian postingan saya tentang cara menampilkan tooltip pada elemen HTML menggunakan Bootstrap. 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 Popover pada Elemen HTML dan Bootstrap 4

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

5 thoughts on “Menggunakan Tooltip pada HTML dan Bootstrap 4

Leave a Reply

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

seventeen − 1 =