Membuat Tooltip pada Gambar Popular Post dengan JavaScript

Tooltip adalah tampilan informasi dalam bentuk teks maupun gambar yang muncul ketika di lewati kursor. Tooltip sendiri biasanya dipasang pada link teks dan link gambar. Tooltip bisa dibuat dengan beragam cara, yaitu menggunakan JavaScript, JQuery, atau dalam bentuk permainan CSS saja.

Nah, kali ini saya hendak berbagi cara membuat tooltip pada gambar Popular Post, sehingga tampilan Popular Post tidak hanya menarik tetapi juga menjadi seo karena akan ada tambahan title=”judul artikel” pada struktur kodenya.

membuat tooltip pada popular post dengan javascript

Berikut cara pembuatannya.

Kopi kode CSS di bawah ini dan letakkan di atas </style>
/* Popular Post with Tooltip */
.PopularPosts ul {list-style:none!important;margin:0;padding:0}
.PopularPosts li {float:left;list-style:none}
.PopularPosts .item-thumbnail {float:left;width:84px;height:84px;margin:0 5px 5px 0;border:5px solid rgba(0,0,0,0.1);}
.PopularPosts .item-thumbnail:hover {border:5px solid rgba(0,0,0,0.2);}
.PopularPosts .item-thumbnail img {display:block;margin:0 ;width:84px;height:84px;}
.PopularPosts .item-title {display:none}

#tooltip {position:absolute;background:#66be92;padding:6px 8px;color:#fff;display:none;font-size:12px;font-weight:bold;float:left}

Kode CSS di atas saya sertakan dengan modifikasi Popular Post yang tampil hanya gambar artikel saja, jika anda menggunakan modifikasi Popular Post yang lain, cukup mengambil kode yang bergaris bawah saja.

Karena tujuan kita ingin membuat tooltip pada gambar Popular Post, maka kita perlu mengubah sedikit struktur kode pada widget Popular Post tersebut.

Caranya, cari kode di bawah ini (biasanya kode ini ada 2, ubah dua-duanya)
<div class='item-thumbnail'>

Lalu ubah kode di dalamnya menjadi seperti ini.
<a class='tooltip' expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                    <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>

Sehingga hasilnya akan seperti ini
                <div class='item-thumbnail'>
                  <a class='tooltip' expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                    <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>


Kode di atas telah di tambahkan title gambar. Yakni dengan kode expr:title='data:post.title' dan expr:alt='data:post.title'.

Setelah itu, cari kode </body> lalu letakkan kode di bawah ini tepat di atasnya.
<script>
//<![CDATA[
this.tooltip=function(){xOffset=10;yOffset=20;$("a.tooltip").hover(function(e){this.t=this.title;this.title="";$("body").append("<p id='tooltip'>"+this.t+"</p>");$("#tooltip").css("top",e.pageY-xOffset+"px").css("left",e.pageX+yOffset+"px").fadeIn("fast")},function(){this.title=this.t;$("#tooltip").remove()});$("a.tooltip").mousemove(function(e){$("#tooltip").css("top",e.pageY-xOffset+"px").css("left",e.pageX+yOffset+"px")})};$(document).ready(function(){tooltip()})
//]]>
</script>

Lalu simpan template anda. Dengan demikian akan nampak tulisan-tulisan bergerak ketika terkena kursor pada Popular Post anda.

JavaScript di atas bisa digunakan untuk membuat tooltip pada widget atau link yang lain (misalnya, link untuk download, demo, link di dalam postingan dll), kuncinya tinggal menambahkan kode class='tooltip' pada tiap-tiap link tersebut.

Cukup gampang bukan? Selamat mencoba, semoga berhasil.
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K
Free and premium blogger templates