Dalam HTML, kita bisa menambahkan atribut title untuk suatu elemen. Teks yang ditentukan dalam atribut ini ditampilkan sebagai tooltip pada mouse over event. Dalam tutorial ini, kita akan membuat tooltips dengan menggunakan Bootstrap dan memiliki fitur tambahan yang baik di atas tooltip standar. Saya menginisialisasi tooltip Bootstrap dengan merujuk pada selector pada elemen id yang memicu fungsi tooltip.

Library Bootstrap Tooltip berisi beberapa opsi untuk menyesuaikan style tooltip, kecepatan, konten, dan lainnya. Kita dapat mengganti opsi default dengan setting sambil memanggil fungsi tooltip. Dalam contoh ini, saya mengatur waktu delay untuk efek animasi dan opsi title dengan JavaScript. Jika tidak ada atribut title yang ditentukan atau kosong maka title yang ditentukan dalam JavaScript akan ditampilkan di tooltip.

HTML Elements Triggers Tooltip

Script memperlihatkan elemen HTML yang dengannya fungsi library tooltip dipanggil pada event mouse over. Ini menunjukkan empat elemen DIV yang memicu tooltip di hover dengan menentukan lokasi penempatan tooltip dengan menggunakan atribut data.

Script jQuery untuk memanggil Bootstrap Tooltip

Script jQuery berikut ini menunjukkan cara memicu tooltip dengan menentukan opsi sebagai argumennya. Saya menentukan delay dan judul default yang akan digunakan jika delay elemen kosong. Opsi title termasuk konten HTML. Script HTML diperbolehkan di tooltip jika opsi html diatur sebagai true.

Output

Screen shot berikut menunjukkan popup tooltip untuk elemen yang memiliki atribut title. Itu juga menunjukkan tooltip dengan teks yang ditentukan dalam JavaScript untuk elemen yang tidak memiliki atribut title.

Cara Membuat Tooltips dengan Bootstrap

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