Setelah memperbandingkan dan mempertimbangkan, membuat tooltip dengan jQuery adalah pilihan terbaik yang mungkin dilakukan. Melalui jQuery berbagai desain menarik lainnya (selain tooltip) dapat dengan mudah dibuat tanpa perlu kode atau script tambahan yang berderet-deret dengan beban yang berkilo-kilo. ya..., ini adalah satu nilai lebih jQuery yang hingga detik ini belum mampu ditandingi oleh javascript manapun.
D E M O
Anda bisa melihat bentuk dan tampilan tooltip melalui link demo di bawah ini.
Arahkan cursor pada daftar posting di Arsip blog (sebelah kanan/sidebar kanan)!
Demo Simple jQuery tooltip GRtipz
Cara membuat Simple jQuery Tooltip
- Login ke Blogger
- Beberapa saat setelah login anda akan menjumpai Halaman Dasbor (Dasboard)
Pilih dan klik Rancangan (Design). - Pilih dan klik Edit HTML.
- Lakukan Backup template dengan klik Download Template Lengkap (Download Full Template), simpan file template di folder PC. Jika terjadi kerusakan tempate akibat beberapa penambahan atau pengurangan kode, gunakan Browse dan Upload yang ada didekatnya, maka template (blog) akan pulih kembali seperti sebelum perubahan dilakukan.
- Cari kode ]]></b:skin> (gunakan Ctrl + F). Latakkan kode CSS di atasnya.
- Cari kode <head> kemudian letakkan javascript di bawahnya.
- Klik Simpan Template (Save Template).
- Gunakan class="GRtipz" pada tag a untuk menampilkan tooltip. Lihat contohnya pada box xHTML.
Kode CSS:
#GRtipz{
min-width:150px;
max-width:200px;
border:1px solid #eee;
border-radius:8px;
line-height:16px;
box-shadow:0 0 3px #000;
background:#5f5e5e url(http://gubhugreyotprojects.googlecode.com/svn/gubhugreyot_bg-GRtipz5.jpg) top right no-repeat;
padding:8px;
color:#000;
font-family:Arial;
font-size:13px;
font-weight:600;
display:none;
text-shadow:1px 1px 1px #fff;
position:absolute;
}Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
this.GRtipz = function(){
xOffset = 10;
yOffset = 20;
$("a.GRtipz").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='GRtipz'>"+ this.t +"</p>");
$("#GRtipz")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#GRtipz").remove();
});
$("a.GRtipz").mousemove(function(e){
$("#GRtipz")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
$(document).ready(function(){
GRtipz();
});
</script>xHTML:
<a class="GRtipz" href="Your URL" title="Write a tooltip text here!">Link Here!</a> <a class="GRtipz" href="http://gubhugreyot.blogdetik.com" title="Tutorial, Tips, Tricks Blogger & Blogdetik">gubhugreyot - Blogdetik</a>
Catatan/Keterangan:
- Untuk merubah ukuran font dan tebal font, lakukan perubahan nilai pada font-size:13px; dan font-weight:600;.
Nilai font-size: 10px, 11px, 12px, 13px atau 14px;
Nilai font-weight: normal, bold, bolder, 400, 500, 600, 700 atau 900 - Anda ingin cara yang lebih praktis dan tinggal pasang? Kode yang sudah terupload di file hosting? Jika ini yang anda mau, silahkan gunakan yang ini!
Kode Siap Pakai:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://gubhugreyotprojects.googlecode.com/svn/GR_jQuerytooltiptip.js" type="text/javascript"></script>
- Dengan javascript di atas, anda tak perlu lagi menggunakan kode CSS. Langsung saja tulis xHTML anda agar tooltip segera terlihat!
- Jika dalam blog anda sudah menggunakan jQuery.1.3.2.js atau jQuery.1.3.2.min.js maka anda tak perlu lagi menambah jQuery yang sama dari tutorial ini!
