Cara Membuat Tooltip Pada Link Blog

Cara Membuat Tooltip Pada Link Blog - Pada kali ini kita akan membahas cara membuat tooltip link atau membuat tooltip link dengan jquery. Selain untuk link, cara membuat tooltip link sederhana ini juga bisa diterapkan untuk teks. Tooltip link adalah suatu tag petunjuk berupa teks maupun gambar yg tampil ketika kursor diarahkan ke teks atau link. Membuat tooltip link berguna untuk memberikan informasi lebih mengenai suatu kata atau kalimat yg penting dan hanya menggunakan CSS dan sedikit jquery. Bagi yg ingin tahu cara membuat tooltip link, simak tutorial dibawah berikut.

Demo

CSS Tooltip Link

• Login ke blogger.
• Kemudian klik menu template.
• Klik edit html.
• Pastekan css tooltip berikut diatas ]]></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 Link

• Pastekan script tooltip berikut diatas </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 info. Di antara tanda kutip isi dengan informasi atau pentunjuk. Contoh :

<a href="http://www.tapike.com/" data-tooltip="Tapike.com">Tapike.com</a>

Tulisan warna merah adalah value tooltipnya. maksimal karakter hanya 25 karakter. Namun anda bisa menambah jumlah karakternya dengan merubah nilai width dan margin-left pada CSS di atas (tulisan warna biru). Demikianlah tutorial cara membuat tooltip link atau cara membuat tooltip link dengan jquery. Semoga artikel ini dapat bermanfaat bagi kita semua.