INFO TERKINI

Tooltip telah menjadi sumber daya umum dan digunakan oleh semua situs utama untuk menggambarkan sebuah link atau memberikan lebih banyak bantuan dan informasi pada bagian text . Mungkin beberapa dari anda pasti pernah melihat toltip ini pada saat anda berada di suatu web / blog dan  pada saat itu anda melihat sebuah tanda tanya kecil yang membuat anda bisa melihat sebuah pop up disertai tooltips informasi

Pada kesempatan kali ini saya akan menshare tentang tooltips ini . Cara membuat tooltips di blog anda ini sangat cukup mudah karena hanya memasukkan kode css saja dan mungkin ini bisa membuat anda lebih mudah untuk memiliki tooltips ini di blog anda.

Untuk anda jika ingin melihat demo nya terlebih dahulu , anda bisa mengklik dibawah ini



Bagaiman anda berminat untuk memunculkan tooltips deskripsi di blog anda ??? jika berminat , ikuti langkah berikut ini :

• Menambahkan Kode CSS di blog anda :

1. Masuk ke dashboard blog anda > Design > Template designer.






2 . Setelah masuk pada bagian template designer pilih advaced > add css > :



3. Copy paste kode css dibawah ini dan letakkan css tersebut di kolom css seperti gambar diatas .

.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;
}

Note : Kode css diatas adalah tooltips sederhana yang saya pasang di blog saya tadi dan jika anda ingin mengganti warna tooltipsnya anda bisa ganti kode kode css yang sudah saya tandai dengan warna biru. Jika anda ingin melihat beberapa warna yang bisa anda pakai klik DISINI

4. Jika selesai anda bisa klik aplly to blog disebelah kanan atas pada menu css.

itu dia cara menambahkan kode css tooltips di blog anda . Untuk mengaktifkan tooltips nya anda bisa menyisipkan kode class="tooltip" pada kode link . Berikut ini saya mempunyai contoh menyisipkan kode tersebut :

• <a href="Link Disini" class="tooltip">ANCHOR TEXT<span>Deskripsi anchor teks dan ini akan muncul pada tooltips</span></a>