Cara Membuat Tooltip Pada Link Blog

Tutrial Blog dan Widget

Pada kali ini kita akan membuat tooltip pada link atau membuat efek tooltip dengan jquery pada blog. Tooltip sederhana ini juga bisa diterapkan bersama teks. Infotip adalah suatu tag petunjuk berupa teks maupun gambar yg tampil ketika kursor diarahkan ke teks atau link. Fitur ini juga berguna untuk memberikan informasi lebih mengenai suatu kata atau kalimat yg penting dan hanya menggunakan CSS dan sedikit jquery. Bagi yg ini membuat tooltip link blog, simak tutorial dibawah berikut.

CSS Tooltip Link

  • 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 Link

  • 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 info. Di antara tanda kutip isi dengan informasi atau pentunjuk. Contoh:

[<a href=”https://blog.itapuih.com/” data-tooltip=”blog.itapuih.com”>blog.itapuih.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 pada link atau cara membuat efek tooltip dengan jquery pada blog. Semoga artikel ini dapat bermanfaat bagi kita semua.

You May Also Like

About the Author: Xsoal

Hello, I am Admin Xsoal.com

Leave a Reply

Your email address will not be published. Required fields are marked *