Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Membuat Tooltips dengan Bootstrap. Dalam HTML, kita dapat menambahkan atribut judul untuk suatu elemen. Teks yang ditentukan dalam atribut ini ditampilkan sebagai tooltip pada mouse di atas event. Dalam tutorial ini, kita akan membuat tooltips dengan menggunakan Bootstrap dan itu memiliki fitur tambahan yang bagus di atas tooltip standar. Saya menginisialisasi tooltip Bootstrap dengan merujuk pemilih elemen id yang mana fungsi tooltip harus dipicu.

Pustaka tooltip Bootstrap berisi beberapa opsi untuk menyesuaikan style tooltip, kecepatan, konten, dan lainnya. Kita dapat mengganti opsi default dengan mengaturnya saat memanggil fungsi tooltip. Dalam contoh ini, saya mengatur waktu tunda untuk efek animasi dan opsi judul dengan JavaScript. Jika tidak ada atribut judul yang ditentukan atau kosong maka judul yang ditentukan dalam JavaScript akan ditampilkan di tooltip.

Elemen HTML untuk Tooltip

Kode menunjukkan elemen HTML dengan fungsi pustaka tooltip yang dipanggil pada mouse di atas event. Ini menunjukkan empat elemen DIV yang memicu tooltip pada hover dengan menentukan lokasi penempatan tooltip dengan menggunakan atribut data.

Script jQuery untuk memanggil Tooltip Bootstrap

Kode jQuery berikut menunjukkan cara menampilkan tooltip dengan menentukan opsi sebagai argumennya. Saya menetapkan penundaan dan judul standar yang akan digunakan jika judul elemen kosong. Opsi judul termasuk konten HTML. Kode HTML diperbolehkan dalam tooltip jika opsi html disetel sebagai true.

Tabel berikut menunjukkan beberapa opsi lebih banyak dari fungsi pustaka tooltip dan nilai defaultnya.

OPTION DESCRIPTION DEFAULT
animation Untuk menambahkan efek fade in / fade out ke pop-up tooltip true
container Untuk menentukan nama elemen di mana markup tooltip harus dibuat secara dinamis untuk menghindari overflow  

 

false

delay Untuk menentukan waktu dalam milidetik untuk efek animasi 0
html Ini memiliki nilai boolean untuk membolehkan kode HTML di tooltip true
placement Ini adalah untuk menentukan posisi tooltip (atas, kanan, bawah, kiri) top
template Template HTML untuk pesan tooltip. Teks judul akan dimasukkan di dalam div yang berisi keterangan tooltip-inner kelasc ‘<div class=”tooltip” role=”tooltip”>< div class=”tooltip-arrow”></div><div class=”tooltip-inner”></div></div>’
title Ini menerima teks / HTML yang akan ditambahkan dalam munculan tooltip. Jika html benar maka kode HTML akan dimasukkan .Jika tidak, tag HTML dilucuti dan konten teks termasuk dalam tooltip.
trigger metode acara seperti hover, fokus, dan manual yang akan digunakan untuk memicu tooltip. Ini menerima beberapa peristiwa pemicu  

 

 

‘hover focus’

Screenshot berikut menunjukkan tampilan tooltip untuk elemen yang memiliki atribut judul. Ini juga menunjukkan tooltip dengan teks yang ditentukan dalam JavaScript untuk elemen yang tidak memiliki atribut judul

 

Cara Membuat Tooltips dengan Bootstrap

Oke itulah tadi pembahasan saya tentang Cara Membuat Tooltips dengan Bootstrap, semoga bermanfaat.