Simple jQuery untuk Membuat Tooltip Pada Blog

Baca Juga

Simple jQuery untuk Membuat Tooltip Pada Blog - Banyak sekali tutorial yang membahas tentang cara menampilkan tooltip menjadi tampilan yang lebih menarik, enak dipandang dan lain dari yang biasanya. Ada yang menggunakan kode JavaScript, CSS3, maupun menggunakan kode jQuery. Dan pada postingan ini saya akan berbagi trik sederhana tentang cara menampilkan dan mempercantik tampilan tooltip menggunakan kode jQuery. Tertarik untuk mencoba?

Simple jQuery untuk Membuat Tooltip Pada Blog

Membuat Template Cadangan

Sebelum masuk ke proses modifikasi kode template, ada baiknya kita buat terlebih dahulu template cadangannya sebagai antisipasi jika nanti terjadi error kode.

Menambahkan Kode jQuery

Pastikan bahwa di dalam template blog sudah atau belum terinstall jQuery. Jika belum maka tambahkan kode jQuery berikut ini di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>

Jika sudah, maka kita abaikan saja. Penggunaan jQuery di dalam template tidak boleh lebih dari satu. Hal ini untuk menghindari terjadinya bentrok antar script sehingga akan menyebabkan beberapa fungsi jQuery tidak bekerja.

Menambahkan Potongan Script jQuery

Salin kemudian tempel kode berikut ini di atas kode </body>

<script type="text/javascript"> $(document).ready(function() { // Tooltip only Text $('.masterTooltip').hover(function(){ // Hover over code var title = $(this).attr('title'); $(this).data('tipText', title).removeAttr('title'); $('<p class="tooltip"></p>') .text(title) .appendTo('body') .fadeIn('slow'); }, function() { // Hover out code $(this).attr('title', $(this).data('tipText')); $('.tooltip').remove(); }).mousemove(function(e) { var mousex = e.pageX + 20; //Get X coordinates var mousey = e.pageY + 10; //Get Y coordinates $('.tooltip') .css({ top: mousey, left: mousex }) }); }); </script>

Mempercantik Tampilan TooltipSupaya tampilan tooltip nantinya menjadi lebih menarik, kita bisa menggunakan kode CSS dan Anda bisa memodifikasinya sesuka hati sesuai dengan kreatifitas Anda sendiri.

Salin dan tempel kode CSS berikut di atas kode ]]</b:skin>

.tooltip { display:none; position:absolute; border:1px solid #333; background-color:#161616; border-radius:5px; padding:10px; color:#fff; font-size:12px Arial; }

Menampilkan TooltipSupaya tooltip ini bisa tampil pada blog, maka kita perlu menambahkan class 'masterTooltip' dan tag 'title' pada kode HTML yang telah kita tentukan. Sebagai contoh kita ingin menampilkan tooltip pada gambar. Kode HTML awal sebagai berikut.

<img src=".../image.png"/>

Setelah disisipkan class class 'masterTooltip' dan  tag 'title', hasilnya seperti di bawah ini.

<img class="masterTooltip" title="Tooltip saya pada gambar" src=".../image.png"/>

Penggunaan tooltip ini tidak terbatas pada gambar saja, kita menampilkannya pada tag yang lain misalnya pada paragraph dan link.

Penggunaan Tooltip Pada Paragraph

<a class="masterTooltip" href="http://shaggyweb.blogspot.com" title="Blogger Tutorial">Shaggy Web Blog</a>

Penggunaan Tooltip Pada Link

<a class="masterTooltip" href="http://shaggyweb.blogspot.com" title="Blogger Tutorial">Shaggy Web Blog</a>

Semogapostingan artikel ini dapat bermanfaat bagi pembaca khususnya para sobat blogger semuanya :)