Tooltip adalah sebuah popup kecil yang muncul pada suatu elemen, umumnya menampilkan informasi dari elemen terkait. Beberapa situs menggunakan Tooltip pada ikon informasi, sehingga ketika visitor mengklik / hover ikon informasi tersebut akan menampilkan sebuah konten berupa popup mini.

Cara kerjanya tidak berbeda jauh dengan Popover, tapi Tooltip ini lebih sederhana dalam pembuatannya. Untuk membuat Tooltip, gunakan data-toggle="tooltip" dan gunakan title sebagai isi dari Tooltip. Contoh: <a href="#" data-toggle="tooltip" title="Ini adalah isi/konten dari Tooltip">Hover DISINI</a> maka hasilnya akan terlihat seperti ini:

gambar 1 - contoh tooltip bootstrap

Tooltip memerlukan jQuery agar dapat bekerja dengan baik, gunakan script berikut pada halaman bersangkutan:

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

Pastikan pada bagian data-toggle diisi sama dengan data-toggle yang ada pada teks !

Posisi Tooltip

Sama seperti Popover Bootstrap, kamu dapat mengatur dimana posisi popup Tooltip ingin ditampilkan dengan menggunakan data-placement.

  • data-placement=”top”, untuk menampilkan popup di bagian atas teks
  • data-placement=”bottom”, untuk menampilkan popup di bagian bawah teks
  • data-placement=”right”, untuk menampilkan popup di bagian kanan teks
  • data-placement=”left”, untuk menampilkan popup di bagian kiri teks
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Ini adalah isi/konten dari Tooltip">Hover DISINI</a>

Kamu juga dapat menggunakan auto jika ingin membiarkan browser yang memutuskan posisi terbaik dimana popup Tooltip di tampilkan, ini sangat bermanfaat jika kamu menampilkan Tooltip di area yang sempit. Contoh: data-placement="auto right" maka browser akan menampilkan popup di sisi kanan jika memungkinkan, jika tidak, ia akan menampilkan di posisi lain.

Sekarang, kamu sudah bisa membuat teks yang menampilkan teks lagi ketika di hover menggunakan Bootstrap Tooltip !


Jangan Lupa Share !!!

32
6 shares, 32 points

Apa Reaksimu ?

Bingung Bingung
6
Bingung
Kesal Kesal
4
Kesal
OMG OMG
6
OMG
Takut Takut
5
Takut
Keren Keren
3
Keren
Sedih Sedih
8
Sedih
Posciety Tech

Pro

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi.

0 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki