Beranda Blogger

Cara Membuat Tooltip Pada Link Blog

11.58
A+ A- Print Email
Cara Membuat Tooltip Pada Link Blog
Cara Membuat Tooltip Pada Link Blog - Pada kali ini kita akan membuat tooltip pada link atau membuat efek tooltip dengan jquery pada blog. Tooltip sederhana ini juga bisa diterapkan pada teks. Tooltip atau infotip adalah suatu tag petunjuk berupa teks maupun gambar yg tampil ketika kursor diarahkan ke teks atau link. Efek tooltip juga berguna untuk memberikan informasi lebih mengenai suatu kata atau kalimat yg penting. Tooltip ini hanya menggunakan CSS dan sedikit jquery. Bagi yg ini membuat Tooltip pada blog, simak tutorial dibawah ini.

Demo

CSS Tooltip

  • Login ke akun blogger.
  • Kemudian klik menu template.
  • Klik edit html.
  • Pastekan kode berikut diatas kode ]]></b:skin>
.tooltip{position:relative;display:inline-block;cursor:help;white-space:nowrap}.tooltip-content{color:#fff;opacity:0;visibility:hidden;font:12px Arial,Helvetica;text-align:center;border-color:#A42317;border-style:solid;border-width:1px;width:150px;padding:15px;position:absolute;bottom:40px;left:50%;margin-left:-76px;background-color:#fff;background-image:linear-gradient(#FF5848,#A42317);transition:bottom .2s ease,opacity .2s ease}.tooltip-content:after,.tooltip-content:before{border-right:16px solid transparent;border-top:15px solid #A42317;background-image:linear-gradient(#A42317,#A42317);bottom:-15px;content:"";position:absolute;left:50%;margin-left:-10px}.tooltip-content:before{border-right-width:25px;border-top-color:#A42317;border-top-width:15px;bottom:-15px}.tooltip:hover .tooltip-content{opacity:1;visibility:visible;bottom:30px}


Script Tooltip

  • Pastekan kode berikut diatas kode </head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'/>
Pemasangan Jquery library hanya boleh ada 1 untuk setiap blog. Jika di blog anda sudah ada jquery library mirip seperti kode diatas, abaikan langkah ini dan hanya pastekan script dibawah ini saja.

$(document).ready(function(){
$('[data-tooltip]').addClass('tooltip');
$('.tooltip').each(function() {
$(this).append('<span class="tooltip-content">' + $(this).attr('data-tooltip') + '</span>');
});
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('.tooltip').mouseover(function(){
$(this).children('.tooltip-content').css('visibility','visible');
}).mouseout(function(){
$(this).children('.tooltip-content').css('visibility','hidden');
})
}
});

Pengaturan

Tambahkan kode data-tooltip="" pada setiap teks atau link yg ingin dimunculkan tooltip. Di antara tanda kutip isi dengan informasi atau pentunjuk tooltip. Contoh :
<a href="http://ngawicybers.blogspot.com/" data-tooltip="Tapike.com">Tapike.com</a>
Tulisan warna merah adalah value tooltipnya. Untuk tooltip maksimal karakter hanya 25 karakter. Namun anda bisa menambah jumlah karakternya dengan merubah nilai width dan margin-left pada CSS tooltip di atas (tulisan warna biru). Demikianlah tutorial cara membuat tooltip pada link atau cara membuat efek tooltip dengan jquery pada blog. Semoga artikel ini dapat bermanfaat bagi kita semua.