Tutorial Belajar Bootstrap 4 Part 22 – Membuat Tooltip dengan Bootstrap

Selamat datang lagi di warungbelajar, masih dalam tutorial yang membahas mengenai bootstrap 4, dalam tutorial kali ini kita akan membahas mengenai Cara membuat Tooltips dengan bootstrap.

Tooltips adalah tampilan informasi yang akan tampil saat cursor di arahkan (mouse over) pada sebuah item (biasanya pada link/button) dalam sebuah website

Dalam Bootstrap telah disediakan beberapa class yang bisa anda gunakan untuk membuat tooltip ini, baik langsung saja kita akan bahas dalam tutorial kali ini.

Cara membuat Tooltip dengan bootstrap 4

Perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama basic_tooltip.html, lalu ketika dibuka di browser maka hasilnya adalah :

Keterangan :

  • Sebelumnya anda harus membuat terlebih dahulu untuk pemicu dari tooltips, bisa menggunakan link ataupun bisa menggunakan button,perhatikan pada line 16 dan 20
  • Pada masing – masing objek tersebut silahkan tambahkan attribute data-toogle dan berikan value tooltip (untuk value bisa anda ganti dengan yang lain), lalu tambahkan attribute title dan tambahkan value yang akan ditampilkan ketika ada mouse berada diobjek tersebut, perhatikan pada line 16 – 20
  • Berikutnya buatlah skrip javascript, dalam hal ini kita gunakan jquery bawaan dari bootstrap, yang perlu anda sesuaikan adalah selector yang digunakan, karena pada bagian link/tombol pemicu kita memberikan value attribute data-toogle adalah tooltip, sehingga kita berikan selector #data-toogle=”tooltip”, perhatikan pada line 25

 

Mengatur Posisi Tooltip Bootstrap 4

Untuk mengatur posisi dari tooltip anda perlu memberikan attribute data-placement, untuk contohnya silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama posisi_tooltip.html, lalu kita buka di browser maka hasilnya :

Keterangan :

  • Untuk mengatur posisi pada tooltip anda bisa menggunakan attribute data-placement (perhatikan pada line 16,18,20,22 ) dengan value top(atas),bottom(bawah),left(kiri), dan right(kanan)

 

Baik sekian dulu teman – teman pembahasan mengenai tooltip, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekain dulu sampai jumpa di tutorial bootstrap selanjutnya.

2 thoughts to “Tutorial Belajar Bootstrap 4 Part 22 – Membuat Tooltip dengan Bootstrap”

    1. Terima kasih mas Karis Maulana, semoga tutorial warungbelajar bisa bermanfaat untuk yang sedang belajar 😀

Leave a Reply

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