Tooltip Versi Baru

Sebelum kita menggunakan Tooltip Versi Baru, terlebih dahulu kita perlu mengenal apa itu Tooltip. Tooltip intinya adalah memunculkan Hover pada saat kita mengarahkan mouse pada link. di beberapa image atau gambar pada postingan blog saya ini, saya gunakan tooltip, namun masih menggunakan versi yang lama alias standart.

Sebagai contoh untuk versi yang lama, silahkan anda sorot tulisan Tooltip Lama ini

Sekarang kita akan menggunakan Tooltip versi baru dengan fungsi yang sama donk!. versi baru yang saya maksudkan, Demo-nya dapat dilihat di RUANG CONTOH blog saya ini.

Sekarang bagaimana cara menggunakan Tooltip ini ?

Pertama, kita pasang pada Editor script HTML blog, Script dibawah ini.

.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}

.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
border: 0; /* IE6 fix */
}

.tooltip:hover span
{
visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}

.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}

Letakan kode tersebut diatas kode ]]></b:skin>
Kemudian Simpan Template Sobat!

selanjutnya pada tulisan yang anda buat untuk di-link, gunakan kode berikut ini :

<a href="TUJUAN URL ANDA" class="tooltip">NAMA TAMPILAN LINK <span>DESKRIPSI TOOLTIP YANG ANDA TAMPILKAN</span></a>

Misalnya pada Postingan bertuliskan begini :

Untuk mengetahui cara pembuatan Tooltip, silahkan anda kunjungi blog WATONOE. (tulisan Watonoe adalah arah link)

.

sehingga tulisan di entri postingan anda adalah sebagai berikut :

Untuk mengetahui cara pembuatan Tooltip, silahkan anda kunjungi <a href="http://watonoe.blogspot.com" class="tooltip">WATONOE <span>anda sedang diarahkan ke blog watonoe</span></a>

Simpan dan post-kan! lihat hasilnya.
(untuk blog ini, saya lebih senang menggunakan yang versi classic saja.!!)