Cara Membuat Tooltips, Murni Hanya Dengan Menggunakan Kode CSS

Apa itu tooltips..???

Untuk lebih jelasnya silahkan lihat contoh berikut ini, arahkan kursor diatas kata berikut :
Tooltip.
Nach, ketika kursor mouse diarahkan atau kata tersebut disentuh jika pakai touchscreen maka muncul kotak dialog seperti yang bisa dilihat pada contoh diatas. Itulah yang disebut tooltip, silahkan mendefinisikannya sendiri sesuai dengan apa yang anda lihat dan rasakan.

Ada apa dengan tooltip..???

Bermula dari keingintahuan bagaimana caranya menampilkan makna ayat secara perkata sebagaimana yang nampak pada web http://quranterjemah.com/, supaya bisa diterapkan pada artikel pelajaran Bahasa Arab yang in-sya Allah sudah dimulai dan terakhir dimodifikasi pada tanggal 22 Maret 2015 yang lalu. Silahkan buka disini..!!!

Akhirnya, ketemu berbagai macam cara untuk membuat tooltip dengan bantuan Google, mulai dari yang paling sederhana sekali sampai yang paling rumit sama sekali.

Cara sederhana membuat tooltip adalah dengan menggunakan atribut title pada kata, kalimat, link ataupun gambar yang ingin diberikan tooltip, contohnya :

Arahkan Kursor disini!

Kode HTML-nya seperti ini :

<span title="Tooltip dengan menggunakan atribut title">disini!</span>
Tooltip ini berhasil dan bisa muncul di Mozilla Firefox dan Browser BB Gemini Curve 8520, tapi tidak bisa di layar sentuh, dan juga kurang responsif.

Adapun untuk membuat tooltip seperti pada contoh yang pertama dibutuhkan kode CSS.

Berikut ini cara memasukkan kode CSS ke blog :

1. Loggin ke Blogger.com kemudian pilih tab Template
2. Pilih "Sesuaikan", setelah terbuka "Perancang Template Blogger" pilih "Tingkat lanjut"
3. Pilih menu paling bawah "tambahkan CSS"
4. Copy paste kode CSS dibawah pada kotak "Tambahkan CSS Khusus"
5. Setelah itu klik "Terapkan ke Blog"

Cara yang lain adalah :

1. Loggin ke Blogger.com kemudian pilih tab Template
2. Pilih "Edit HTML", setelah terbuka "Perancang Template Blogger"
3. Copy paste kode CSS dibawah sebelum kode ]]></b:skin>
4. Setelah itu klik "Simpan Template"

Kode CSS Tooltip

.tooltip {
color: #1f8b8a;
border-bottom: thin dashed #1d7b77;
position: relative;
cursor: pointer;
line-height: 2.5;
}

.tooltip:before,
.tooltip:after {
display: block;
position: absolute;
visibility: hidden;
opacity: 0;
transition: opacity .2s;
left: 50px;
margin-bottom: -15px;
transition: margin .2s;
line-height: 1.3;
}

.tooltip:before {
width: 190px;
padding: 10px;
box-sizing: border-box;
bottom: 25px;
border-radius: 5px;
font-size: .9em;
text-align: center;
margin-left: -130px;
background: rgba(0,0,0,.85);
content: attr(data-title);
color: #fff;
}

.tooltip:after {
content: "";
border-top: 7px solid rgba(0,0,0,.85);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
bottom: 18px;
margin-left: -40px;
}

.tooltip:hover:before,
.tooltip:hover:after {
visibility: visible;
opacity: 1;
margin-bottom: 0px;
}

Jika kode CSS diatas sudah berhasil direferensikan pada kode HTML blog, cara menerapkannya cukup tambahkan atribut "class" dan "data-title" pada teks, kata, kalimat, link atau image yang akan di beri tooltip, lakukan seperti contoh berikut :
Arahkan Kursor Kesini!
Kode HTML-nya seperti ini :

<span class="tooltip" data-title="Contoh Tooltip Text Kalimat">Arahkan Kursor Kesini!</span>

Kelebihan tooltip dengan kode CSS ini, lebih responsif dan bisa dimunculkan pada layar sentuh. Berdasarkan uji coba pada browser bawaan tablet Samsung Galaxy Tab 2.

Demikian semoga bermanfaat.
____________________________________________________

Sumber : Pure CSS ToolTips!