T-10 Tooltips: Simple Tooltips Generator Untuk Mempercantik Presentasi Website Anda
Sebuah website dibuat untuk tujuan merepresentasikan sesuatu. Layaknya dalam sebuah presentasi konvensional, sebuah trik untuk membuat presentasi itu terlihat professional dan menjanjikan adalah dengan menambahkan efek-efek dalam setiap tulisan. Teknologi website pun tidak ketinggalan, saat ini migrasi web biasa menjadi web 2.0 membuat sebuah presentasi di website lebih menarik dan professional. Banyak efek ditambahkan demi kenyamanan penunjung yang sedang mencari informasi di website tersebut.
Tooltip adalah teknik merepresentasikan website lebih baik, contoh sebuah tooltip adalah ketika anda mengarahkan kursor anda di atas tulisan ini. Namun pada web tooltip masih dirasa kurang karena sangat terbatas dalam memberi keterangan sebuah link atau gambar. Oleh karena itu saya mencoba membuat tooltip dengan fasilitas yang lebih menarik dan menunjukkan kesan lebih professional daripada tooltip biasa.
Kelebihan tooltip ini adalah anda dapat me-load isi 1 file untuk bahan presentasi anda melalui tooltip dan format text pada tooltip juga bisa diisi HTML, dan anda juga bisa menampilkan sebuah gambar dalam ukuran apapun ketika tooltip muncul.
Sekarang menuju ke source code library ini.
Pertama, siapkan framework prototype.js (versi 1.6) dan salin ke folder tooltip anda.
Kedua, sediakan beberapa contoh content untuk di load di tooltip anda.
Lalu, buat file JavaScript dengan nama “tooltip.class.js” dan isi file tersebut adalah spt ini:
/* Pembuat: Chandra Jatnika Website: chandrajatnika.com Nama : T10 Tooltip Tujuan : Membuat Tooltip dinamis di setiap element HTML */ var T10Tooltip = Class.create( { // method initialize adalah konstruktor dari class T10Tooltip initialize: function(){ /* tidak melakukan apa-apa, anda bisa menambahkan beberapa perintah disini apabila ingin mengembangkan */ }, set: function(element,filename,maxwidth){ /* periksa apakah nama file adalah sebuah image karena program selanjutnya akan memperlakukan hal berbeda antara image atau file text */ var isImage = this._isImage(filename); // siapkan id unik untuk tiap element tooltip var id = this._tooltipID + element; // jika lebar maksimal tooltip tidak didefinisikan maka defaultnya adalah 400px var maxwidth = maxwidth || 400; // buat element berupa tag div untuk membuat element tooltip var div = '<div id="'+id+'" style="position:absolute; '; div += 'left:0px; top:0px; border:1px solid #000; padding:4px; '; div += 'font-size:11px; background-color: #FFF; width: '+maxwidth+'px"></div>' // sisipkan element tooltip ke dalam dokumen new Insertion.Bottom(document.body, div) $(id).hide(); // setelah selesai disisipkan lalu sembunyikan element var hasLoad = false; Event.observe(element,'mouseover',function(event){ /* variable hasLoad sebelumnya bernilai false dan jikalau masih false maka perintah di bawahnya akan dieksekusi, namun setelah itu hasLoad di setting lagi dengan nilai true. ini bertujuan agar load content hanya dilakukan 1 kali sampai element tooltip terisi penuh dari content yg diinginkan. ini semua dilakukan karena event mouse over akan terus dipanggil berkali-kali apabila mouse terus bergerak di atas element pemicu tooltip */ if(!hasLoad){ hasLoad = true; if(isImage) $(id).update('<img src="'+filename+'">'); // load file image else new Ajax.Updater(id,filename,{method: 'get'}); // load file text } $(id).show(); // tampilkan element tooltip yg sebelumnya disembunyikan // dua baris di bawah untuk menentukan posisi koordinat element tooltip //$(id).style.top = Event.pointerY(event) + 'px'; //$(id).style.left = Event.pointerX(event) + 'px'; // element tidak akan hilang apabila mouse menuju ke element tersebut Event.observe(id,'mouseover',function(){ $(id).show() }); Event.observe(id,'mouseout',function(){ $(id).hide() }); }); Event.observe(element,'mousemove',function(event){ // dua baris di bawah untuk menentukan posisi koordinat element tooltip $(id).style.top = Event.pointerY(event)+ 2 + 'px'; $(id).style.left = Event.pointerX(event) + 'px'; }); /* apabila mouse keluar dari element pemicu tooltip maka element tooltip akan disembunyikan */ Event.observe(element,'mouseout',function(){ $(id).hide() }); }, _isImage: function(filename){ // ambil extention file var extention = filename.split('.').last(); // tentukan extention dari beberapa image var imagearray = ['jpg','jpeg','png','gif','bmp','ico']; // jika extention file mengandung extention image maka kembalikan nilai true return (imagearray.indexOf(extention) > -1) }, /* id unik untuk membentuk id element tooltip, dapat anda ubah apabila banyak element dengan id serupa di dalam web anda */ _tooltipID: '_divToolTip' } );
Kemudian buat interface utk tooltip ini, entah itu file PHP atau HTML bukan masalah karena library tooltip ini berbasis JavaScript. Kemudian ini file tersebut dengan script di bawah ini.
<html> <head> <title>T-10 Tooltips v1.0</title> <script language="javascript" src="prototype.js"></script> <script language="javascript" src="tooltip.class.js"></script> <script language="javascript"> /* setelah dokumen selesai di-load maka setting beberapa element agar dapat mengeluarkan tooltip */ window.onload = function(){ var tooltip = new T10Tooltip(); /* penggunaan method set: tooltip.set( NAMA_ELEMENT , PATH_KE_FILE , [LEBAR_MAKSIMAL] ) */ tooltip.set('a1','samplecontent/ads.htm'); tooltip.set('a2','samplecontent/list.php'); // menampilkan gambar lebih baik tentukan juga lebar maksimalnya tooltip.set('a3','samplecontent/SnapT10.jpg',500); tooltip.set('img1','samplecontent/Sunset.jpg',800); } </script> <style> body,table{ font-family:Verdana, Arial, Helvetica, sans-serif } </style> </head> <body> <a href="#" id="a1">Just Introduction</a><br /><br /> <a href="#" id="a2">A Simple PHP List</a><br /><br /> <a href="#" id="a3">You Can See The Screenshot From This Link If You Want To</a><br /><br /> <img src="Sunset.jpg" id="img1" /><br /> <span style="font-size:10px">Place your mouse on this image if you want to see the image true size</span> </body> </html>
Untuk melihat hasil script diatas anda dapat menuju link ini.
Script lengkap juga saya sediakan dan dapat anda download disini.
Semoga dapat menambah wawasan… ^_^
Chandra Jatnika
Subarashii!
Suteki!
Kirei!
Kakoi!
Bener2 nice pak, kirain bisa ngelihat yg kya gini di program browser opera doank. ternyata bisa dibuat sendiri…
Thanks!
Mas saya ada sedikit tambahan, supaya pada saat mouse-move, tooltipnya mengikuti gerakan mouse. Berikut tambahannya :
// dua baris di bawah untuk menentukan posisi koordinat element tooltip
//$(id).style.top = Event.pointerY(event) + ‘px’;
//$(id).style.left = Event.pointerX(event) + ‘px’;
Event.observe(element,’mousemove’,function(event){
// dua baris di bawah untuk menentukan posisi koordinat element tooltip
$(id).style.top = Event.pointerY(event)+ 2 + ‘px’;
$(id).style.left = Event.pointerX(event) + ‘px’;
});
Saya pindahkan kode yang mengatur posisi agar di-triger saat event onmousemove. Dan juga menambah 2 pixel jarak antara tooltip dan element, agar saat geser kekanan tooltipnya tidak menghalangi event element.
Saya juga meng-uncoment kode yang meng-hide tooltip pada saat event element.mouseout.
/* apabila mouse keluar dari element pemicu tooltip maka
element tooltip akan disembunyikan */
Event.observe(element,’mouseout’,function(){
$(id).hide()
});
Terakhir saya ingin bilang “Nice Articel”. Saya sebenernya lagi belajar Prototype dan kebetulan juga lagi perlu tooltip. Hanya saja selama ini saya cari kebanyakan menggunakan kode sendiri yang sangat panjang dan jadi nggak gampang dimengerti. Ada juga yang pakai YUI tapi sangat kompleks untuk sekedar tooltip.
Thanks mas.
Wah, saya juga terima kasih banyak sama mas erwin udh dikasih tambahan script yang buat tooltip ini lebih cool.
Ooops, mengenai comment itu saya emang salah, saya post gak uncomment dl sebelum nge-post, krn itu saya lakukan utk buat screenshot di gambar atas aja.
Jadi utk semua yg dah terlanjur salin script langsung dari blog ini jgn lupa uncomment baris ke 62 ya…hehe
wah websita nya keren bnged y..
isinya di perbanyak lagi y.
bagaimana klo membahasa tentang pengetahuan umum juga?
tidak hanya terbatas pada coding saja?
misal teknologi komputer terbaru ato software terbaru yang handal dalam membangun web?
kalo mau bikin di wordpress gimana ya?
bisa aja mas…tp lebih baik di convert dulu deh scriptnya menjadi jQuery karena wordpress banyak plugins-nya pake jQuery.
makasih bnyak infonya….. smoga bermanfaat ilmunya
difahk_if
Luar biasa
Mantabs….!!