Trik Membuat CSS3 Image Tooltip di WordPress

Tooltips adalah cara yang bagus untuk menampilkan informasi untuk pengunjung di website Anda dengan hanya melayang di atas gambar atau teks saat image atau text tersebut di sorot oleh mouse. Tooltips dapat digunakan, misalnya untuk memberikan keterangan untuk gambar, atau deskripsi yang lebih panjang untuk link, atau informasi yang berguna yang akan meningkatkan pengalaman pengguna dari situs Anda, tanpa mengganggu pada desain.

Tutorial Kali ini saya akan menunjukkan kepada Anda bagaimana untuk membuat tooltip sederhana menggunakan HTML dan CSS untuk menampilkan tag judul hyperlink Anda.  dan nantinya akan di aplikasikan juga untuk website yang anda bangun dengan wordpress, sebagai contoh di Avatar logo author box seperti milik blog centerklik.

Mari dimulai dengan membuat markup sederhana untuk link html. anda perlu memberikan judul yang akan menjadi isi tooltip, dan menetapkan class:

<a title="Ini informasi yang anda jadikan tooltips." class="tooltip">CSS3 Tooltip</a>

Setelah anda membuat Script html Tooltips sekarang anda buat script Css seperti dibawah ini. dan setelah selesai silahkan coba sorot text maka akan keluar informasi dengan gaya tooltips.

/* Tooltips */ .tooltip{ display: inline; position: relative; } .tooltip:hover:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 24px; color: #fff; content: attr(title); left: 10%; padding: 5px 10px; position: absolute; z-index: 98; width: 180px; } .tooltip:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 10%; position: absolute; z-index: 99; }

Untuk mengaplikasikan di WordPress seperti milik blog centerklik di bagian author box, jika anda belum tahu bagaimana membuat author box pada wordpress, silahkan baca disini. Jika anda sudah bisa langsung aja copy script css3 diatas di style.css di theme wordpress anda.

Dan kemudian modifikasi Script author box di Single.php anda tambahakan link dengan class tooltip.

<span class="photo"> <a title="Hello..! I'am John Mamad Thanks Visit my Blog" class="tooltip"> <?php if(function_exists('get_avatar')) { echo get_avatar( get_the_author_meta('email'), '100' ); } ?> </a> </span>