Tooltip adalah sebuah dialog kecil dan sederhana yang muncul ketika pointer mouse diletakkan(Hover) pada sebuah elemen. Penggunaan Tooltip biasanya digunakan pada tag <a>, <abbr>, ataupun tag lainnya yang bersifat inline. Fungsinya adalah memberikan informasi pada sebuah teks yang ditunjuk oleh mouse (mouseover/hover). Contoh nyatanya ada pada teks dibawah.
Letakkan Pointer Mouse Anda Disini Untuk Melihat Tooltip Inilah yang disebut Tooltip 🙂
Bagaimana? Ingin mencoba membuatnya? 🙂
Cara Membuat Tooltip
Yap, sekarang mari kita bahas bagaimana cara membuatnya.
Pertama-tama, kita akan membutuhkan kode html untuk membuat tooltip. Kode HTMLnya sebagai berikut
<a class="tooltip" href="#">Letakkan Pointer Mouse Anda Disini Untuk Melihat Tooltip <span class="bubble">Inilah yang disebut Tooltip :)</span></a>
Disini saya menggunakan tag <a> sebagai elemen yang akan dihovernya. Pada kode yang di cetak merah, seperti yang kita lihat saya menambahkan class ‘tooltip’ untuk tag <a> dan class ‘bubble’ untuk tag <span> yang nantinya akan menjadi balon tooltipnya.
Setelah itu lalu, tinggal tambahkan CSSnya :
<style>
/* Style untuk elemen a-nya */
a.tooltip {
position:relative;
display:inline-block;
}
/* Style untuk balon Tooltip*/
a.tooltip .bubble {
position:absolute;
padding:10px;
visibility: hidden;
z-index: 999;
color:#fff;
background-color: #333;
border-radius:3px;
min-width:170px;
opacity: 0.7;
bottom:30px;
}
/*Style untuk tanda panah kecil*/
a.tooltip .bubble:before {
position: absolute;
content: "";
height: 0;
width: 0;
border:10px solid transparent;
bottom:-17px;
border-top:10px solid #333;
}
/*Style untuk menampilkan buble saat dihover*/
a.tooltip:hover .bubble {
visibility: visible;
}
</style>Selesai. Mudah kan ?
Keterangan
Kode yang diwarnai merah merupakan kode untuk menentukan posisi tooltip anda. Pada tutorial ini, hanya 2 posisi tooltip yang bisa anda pakai, yaitu diatas dan dibawah. Kode CSS diatas adalah kode tooltip dengan posisi di atas elemen yang di hover. Anda bisa merubah posisinya berada di bawah dengan mengganti ‘bottom’ menjadi ‘top’, dan ‘border-top’ menjadi ‘border-bottom’.
Jika anda masih sangat awam, dibawah ini saya sediakan selruruh kode untuk membuat tooltip agar anda bisa langsung membuatnya sendiri. Buka notepad, lalu pastekan kode dibawah ini, setelah itu klik menu file > save as > berinama file dengan nama namasesukaanda.html > lalu pilih ‘All files’ pada pilihan format. Setelah itu klik 2 kali file (buka/jalankan) tersebut dan anda akan melihat hasilnya sendiri.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tooltip</title>
<style>
/* Style untuk elemen a-nya */
a.tooltip {position:relative;display:inline-block;}
/* Style untuk balon Tooltip*/
a.tooltip .bubble {
position:absolute;
padding:10px;
visibility: hidden;
z-index: 999;
color:#fff;
background-color: #333;
border-radius:3px;
min-width:170px;
opacity: 0.7;
bottom:30px;
}
/*Style untuk tanda panah kecil*/
a.tooltip .bubble:before {
position: absolute;
content: "";
height: 0;
width: 0;
border:10px solid transparent;
bottom:-17px;
border-top:10px solid #333;
}
/*Style untuk menampilkan buble saat dihover*/
a.tooltip:hover .bubble {
visibility: visible;
}
</style>
</head>
<body>
<br/><br/><br/>
<div style="margin:auto;width:400px;">
<a href="#" class="tooltip">Hover ini Vroh. Keren ga vroh?
<span class="bubble">Inilah yang disebut Tooltip :)</span></a>
</div>
</body>
</html>Sekian. Semoga bermanfaat 🙂
Syihab Husin
Halo mas Syakir… Keren mas artikelnya, saya baru tau kalau itu (hover) namanya tooltip, hehehe
Kalau boleh tanya, tooltip itu hover dari tipsnya keluarnya pasti di pojokan kanan ya? apakah nggak bisa dipindah agak ke tengah atau mengikuti mouse kita, gitu? hehehe 😀
Thanks before 🙂
Syakir Rahman
ngga selalu di pojok kanan sih.. bisa juga di set di tengah.. tapi kalo ngikutin mouse, saya belum nemu caranya heheh..
makasih komennya yaah 🙂
Aftar Fadilah
Kalau yang ngikuti mouse setau saya pakai kode Java Script gan. Tapi saya juga belum tahu gimana kodenya..
Muhammad Nuhan Nahidl
Wah rumit juga ya gan….
Syakir Rahman
Itu dibikin sesimple mungkin loh
ReiKazuya
Gan Syakir, Kalau mau buat jadi gini gmana ya 😀
Tolong dong, Ane pengen buat Gtu, cuma ane kurang paham gmana caranya >w<
Nih Gambarnya http://3.bp.blogspot.com/-s44K7cgkEOE/VJsZM0K4HJI/AAAAAAAACAI/vISHyKeahso/s1600/Screenshot_1.jpg
Syakir Rahman
Sebenernya ini konsepnya sama dengan yang di posting ini.. Cuma beda isi tooltipnya aja.. Agan bisa bikin kayak begitu pake tutorial di posting ini, tapi pas bagian di dalam tag nya diganti jadi HTML buat tampilin markup posting yang muncul itu..
Gilang Adi S
Gan,, kalau mau masukin kode html ke dalam tooltip gimana, untuk mengganti teks
Misal Teksnya agan yang di atas itu “Inilah yang disebut Tooltip” dan teks tersebut diganti kode html
Syakir Rahman
Lihat di bagian kode html-nya.. Di dalam tag
<a>ada tag<span>, nah itu didalamnya di ganti sama teks sesuai keinginan.. Kalo mau masukin teks yang banyak, sebaiknya tag<span>-nya di ganti jadi<div>saja..sudarmono
maksih banyak mas, sukses aku buat tooltipnya dengan gabungan sql