Tutorial Mudah Tooltips dengan CSS3 dan jQuery

Di hari yang cerah ini blog Oto Website akan share tentang Tooltip yang bertema Tutorial Mudah Tooltips dengan CSS3 dan jQuery. Sebelumnya bagi anda yang tidak tahu dengan Tooltip Anda bisa melihatnya sedikit penjeasanya di tutuorial Cara Membuat Tooltip Preview Image Dengan jQuery. Ehm sedikit pemberitahuan sebelumnya blog ini juga pernah membahas tentang Tooltips juga yang berjudul Cara Membuat Tooltip Otomatis Semua Title. Mungkin tidak perlu berlama-lama lagi untuk lebih jelasnya tentang Tutorial Mudah Tooltips dengan CSS3 dan jQuery anda bisa melihat demonya lansung dengan menekan tombol berikut ini.

Lihat Demo

---

Cara Memasang Tutorial Mudah Tooltips dengan CSS3 dan jQuery

---

1. Login ke akun blogger anda.

2. Pada Dasbor klick ➨ Rancangan ➨ Edit HTML.

3. Centang Expand Template Widget ➨ Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.

4. Selanjutnya dalam Edit Template sobat cari kode ]]></b:skin> atau <style> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Bila sudah ketemu sekarang sobat copy kode CSS3 berikut dan paste atau letakkan di atas kode tadi.

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

6. Masih di dalam Edit Temlpate, sekarang letakkan kode jQuery berikut di atas kode </head>

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

NB : Hapus kode yang saya beri warna merah bila di template Anda sudah terinstal jQuery 1.7.1

7. Simpan Template.

8. Terakhir, untuk menerapkannya di blog Anda, Anda harus menggunakan kode pemanggil, dan kode pemanggilnya adalah berikut ini :

<b data-tooltip="Teks tooltips">Teks di postingan</b>

NB : Ganti Teks tooltips dengan teks yang akan muncul sebagai Tooltips
Ganti Teks di postingan dengan teks yang akan berada di postingan.

Selesai atau Finish !

Saya rasa cukup untuk kali ini, silahkan tinggalkan tanggapan atau komentar Anda tentang postingan atau article kali ini!