TutorNesia ~ Tooltip ini adalah plugin JQuery yang ringan dan memberikan alternatif yang jauh lebih sederhana sebagai pengganti plugin tooltip yang lain kepada Anda yang hanya ingin mempercantik tampilan tooltip standar dan telah lulus uji coba.
Pada elemen CSS ini anda harus memasang sebelum ]]></b:skin>, dan pastekan CSS di bawah ini.
.tooltip {
background-color:#000;border-radius:3px;
color:white;font: 14px Oswald;
padding:10px 10px;
display:block;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
box-shadow:0 1px 2px rgba(0,0,0,0.4);
}Anda dapat mengubah warna background yang saya beri tulisan tebal #000, ukuran text juga bisa ditentukan pada 14px menjadi 15px/13px (perbesar/perkecil).
Langkah selanjutnya cari kode </head> dan pastekan kode javascript ini sebelum </head>,
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script><script type='text/javascript'>
//<![CDATA[
(function($) {
$.fn.myTooltip = function(n,o) {
n = n || "title";
o = jQuery.extend({
top: 30,
left: 30,
fade: true,
time: 400
}, o);
return this.each(function() {
var ww = $(window).width(),
wh = $(window).height();
$(window).resize(function() {
ww = $(this).width(),
wh = $(this).height();
});
$(this).on({
mouseenter:function(e) {
var t = $(this).attr(n),
tp = e.pageY,
lp = e.pageX;
$('body').append('<span class="tooltip" style="position:absolute;z-index:999;display:none;">'+t+'</span>');
if(o.fade) {
$('.tooltip').fadeIn(o.time);
} else {
$('.tooltip').css('display', 'block');
}
if($(this).attr('data-custom')) {
$('.tooltip').addClass($(this).data('custom'));
}
var ew = $('.tooltip').outerWidth()+30;
$(this).removeAttr(n).mousemove(function(e) {
var tp = e.pageY,
lp = e.pageX;
if(lp+ew > ww) {
lp = ww-ew-o.left;
}
$('.tooltip').offset({top:tp+o.top,left:lp+o.left});
});
},
mouseleave:function() {
$(this).attr(n, $('.tooltip').html());
$('.tooltip').remove();
}
});
});
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
$('a').myTooltip();
});
//]]>
</script>Tooltip ini hanya berkerja jika ada Jquery, namun jika blog anda telah ada Jquery sebelumnya (dengan versi berapapun) Jquery yang saya sertakan dengan warna biru diatas, diabaikan saja.
Pengaturan:
Perhatikan JS yang bertulisan Tebal:
top: 30 = Digunakan untuk mengatur jarak atas tooltip dari pointerleft: 30 = Digunakan untuk mengatur jarak samping kiri tooltip dari pointer
fade: true = Jika bernilai true maka tooltip akan ditampilkan dengan efek animasi .fadeIn()
time: 400 = Digunakan untuk mengatur kecepatan efek .fadeIn()
Anda bisa sesuaikan dengan selera anda, berkereaksilah sendiri.
Perhatikan dalam kode js yang saya beri warna biru:
Elemen dibawah ini berkerja dengan semua link dan title:
$('a').myTooltip();Jika anda mau tooltip berkerja pada bagiana yang anda beri title (Hanya ada title) ganti kode diatas dengan kode bawah ini:
$('a[title]').myTooltip("title");Jika anda hanya ingin tooltip berkerja pada postingan saja, gunakan kode dibawah ini:
$('.post a[title]').myTooltip("title");Rasanya sudah cukup jelas dengan keterangan yang saya berikan, jika ada pertanyaan harap tinggalkan komentar anda dibawah ini.
Baca Juga Artikel Terkait Lainnya
Silahkan bertanya sesuai dengan artikel yang telah anda baca diatas.
Link aktif otomatis terseleksi ke SPAMMER.
Alasan komentar anda tidak terjawab adalah OOT atau diluar kemampuan Admin.