Cara Membuat Tool Tips Dengan Jquery

Sobat blogger, Tips tutorial kali ini yang ingin saya share adalah Cara Membuat Tool Tips Dengan Jquery. Mungkin sobat blogger sudah tidak asing lagi dengan Tool Tips ini. Tool Tips ini adalah salah satu trik blogger yang mempunyai kegunaan untuk menampilkan Tittle atau judul, atau kata apa saja yang sobat inginkan,apabila Crusor diarahkan ke tulisan atau gambar yang mempunyai link. Dan tentunya selain manfaat diatas, tool tips ini bisa menambah kesan cantik pada blog sobat.

DEMO

Bagaimana sob, sudah lihat Efek dari Tool Tips, kalau sobat berminat ingin menggunakan trik ini, berikut tutor Cara Membuat Tool Tips Dengan Jquery  :

• Login blog
• Rancangan >> edit HTML
• Cari kode ]]></b:skin>
• Lalu taruh kode dibawah ini tepat diatas kode ]]></b:skin>

.tooltip {
position: relative;
display: inline-block;
cursor: help;
white-space: nowrap;
border-bottom: 1px dotted #777;
}
.tooltip-content {
opacity: 0;
visibility: hidden;
font: 12px Arial, Helvetica;
text-align: center;
border-color: #aaa #555 #555 #aaa;
border-style: solid;
border-width: 1px;
width: 150px;
padding: 15px;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -76px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
-moz-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-transition: bottom .2s ease, opacity .2s ease;
-moz-transition: bottom .2s ease, opacity .2s ease;
-ms-transition: bottom .2s ease, opacity .2s ease;
-o-transition: bottom .2s ease, opacity .2s ease;
transition: bottom .2s ease, opacity .2s ease;
}
.tooltip-content:after,
.tooltip-content:before {
border-right: 16px solid transparent;
border-top: 15px solid #fff;
bottom: -15px;
content: "";
position: absolute;
left: 50%;
margin-left: -10px;
}
.tooltip-content:before {
border-right-width: 25px;
border-top-color: #555;
border-top-width: 15px;
bottom: -15px;
}
.tooltip:hover .tooltip-content{
opacity: 1;
visibility: visible;
bottom: 30px;
}  

Lalu taruh kode dibawah ini tepat dibawah kode ]]></b:skin>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src='http://vikrymadz.googlecode.com/files/helper-blogger-tooltip01.js' type='text/javascript'></script>

Simpan template.

Untuk menerapkannya dipostingan sobat memakai cara berikut ini :

<b data-tooltip="Ganti ini dengan isi tootips sobat">Kata sobat Disini</b>


Begitulah sob Cara Membuat Tool Tips Dengan Jquery, selamat mencoba, semoga bermanfaat.

Share this post