tooltip 2

 http://chandrajatnika.com/2008/07/t-10-tooltips-simple-tooltips-generator-untuk-mempercantik-presentasi-website-anda/

 

T-10 Tooltips: Simple Tooltips Generator Untuk Mempercantik Presentasi Website Anda

July 25th, 2008
Leave a comment
Go to comments

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… ^_^

Categories: Ajax, JavaScript, PrototypeJs, Snippets, Tools Tags: Ajax, DHTML, JavaScript