Membuat Tooltip Menggunakan CSS

Setelah sebelumnya saya share tentang Cara Membuat Tooltip Otomatis Pada Semua Tag 'Title' Dengan Script, kali ini saya mencoba share lagi tentang membuat tooltip yang hanya menggunakan CSS.

Berbeda dengan tooltip dengan script yang lalu, Tooltip ini lebih ringan dari pada dengan menggunakan javascript.Untuk membuatnya sobat bisa menggunakan cara di bawah ini:

• Login ke blog sobat.
• Pilh tata letak.
• Klik edit html.
• Letakkan kode di bawah ini di atas kode ]]></b:skin> :

.tooltip {position:relative;}
.tooltip span {display:none;}
.tooltip:hover span {
display:block;
position:absolute;
width:200px;
left:20px;
top:20px;
background-color:#006633;
border:3px solid #0099FF;
padding:5px;
font-size:15px;
color:#000000;
text-decoration:none;
font-family:Verdana,arial, helvetica, sans-serif;}

• Kemudian simpan.

CARA MENAMPILKAN KE DALAM POSTINGAN

<a href="http://e-tuts.blogspot.com/2012/12/membuat-tooltip-menggunakan-css.html" class="tooltip"><span>MEMBUAT TOOLTIP MENGGUNAKAN CSS</span>Tooltip</a>

Ganti link yang dicetak merah dengan link yang Anda suka.
Sedang yang berwarna biru adalah text yang akan keluar pada tooltip, dan warna hijau merupakan tulisan yang mengandung tooltipnya, silahkan sesuaikan dengan text yang Anda inginkan.

Jika ingin mengganti background-nya dengan gambar, maka sobat cukup menganti background-color:#006633; dengan alamat gambar yang Anda suka.

Contoh penulisannya :

background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtddvByR15YCRWBy8JGrNGKxjeZtRDymNGz3D0AAcGHcnmf-wy_1JtlkEvii6LD7ENhyqEY1YVrE7aBmUlhcK3IAbMRgnFKNaF1WuvHiaASucoFlQ5VViyfU3jcJKD_yu30bFjkbOAVOoJ/s1600/blue-stripes-300x300.jpg")no-repeat bottom;

Ganti alamat gambar yang berwarna merah dengan alamat gambar yang Anda suka.

Contoh hasilnya :

MEMBUAT TOOLTIP MENGGUNAKAN CSSTooltip
Ini contoh tooltip menggunakan balon kata ala e-Tuts,silakan sobat modifikasi sesuka hati. Tooltip disini bentuknya sama karena e-Tuts hanya menggunakan satu model tooltip daripada bikin pusing kan?! hehehTooltip dengan balon kata ala e-Tuts
Mari telunjuknya disini..