Tooltip / Agar muncul tulisan ketika link ditunjuk atau disentuh

Jika sobat sering berkunjung ke blog atau situs yang profesional, pasti sobat sering menemukan teknik tooltip ini. Jika kita menunjuk pada sebuah link, akan muncul penjelasan singkat tentang link tersebut (mungkin seperti gambar di samping, ilustrasi aja sob). Trik ini dikenal dengan istilah "tooltip". Dengan menggunakan trik ini pada blog kita, pengunjung akan lebih tertarik untuk mengklik link jika link tersebut disertai dengan penjelasan. Ataukah sobat ingin membuat tolltip ini untuk link iklan? Tidak ada masalah, karena tooltip ini memang bertujuan untuk menarik perhatian pengunjung.

• Langkah pertama, copy kode di bawah ini kemudian paste tepat di atas kode ]]></b:skin>.

#dhtmltooltip{ position: absolute; left: -300px; width: 150px; border: 1px solid black; padding: 2px; background-color: #E1EEFD ; font-family:"Verdana",Arial;font-size:12px; visibility: hidden; z-index: 100; /*Remove below line to remove shadow. Below line should always appear last within this CSS*/ filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); } #dhtmlpointer{ position:absolute; left: -300px; z-index: 101; visibility: hidden; }

• Setelah itu lanjutkan meng-copy kode di bawah ini kemudian paste tepat di atas kode </head>

<script type='text/javascript'> //<![CDATA[ var offsetfromcursorX=12 //Customize x offset of tooltip var offsetfromcursorY=10 //Customize y offset of tooltip var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image document.write('<div id="dhtmltooltip"> </div>') //write out tooltip DIV document.write('<img id="dhtmlpointer" src="arrow2.gif">') //write out pointer image var ie=document.all var ns6=document.getElementById && !document.all var enabletip=false if (ie||ns6) var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "" var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : "" function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function ddrivetip(thetext, thewidth, thecolor){ if (ns6||ie){ if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px" if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor tipobj.innerHTML=thetext enabletip=true return false } } function positiontip(e){ if (enabletip){ var nondefaultpos=false var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft; var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop; //Find out how close the mouse is to the corner of the window var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20 var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20 var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000 //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<tipobj.offsetWidth){ //move the horizontal position of the menu to the left by it's width tipobj.style.left=curX-tipobj.offsetWidth+"px" nondefaultpos=true } else if (curX<leftedge) tipobj.style.left="5px" else{ //position the horizontal position of the menu where the mouse is positioned tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px" pointerobj.style.left=curX+offsetfromcursorX+"px" } //same concept with the vertical position if (bottomedge<tipobj.offsetHeight){ tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px" nondefaultpos=true } else{ tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px" pointerobj.style.top=curY+offsetfromcursorY+"px" } tipobj.style.visibility="visible" if (!nondefaultpos) pointerobj.style.visibility="visible" else pointerobj.style.visibility="hidden" } } function hideddrivetip(){ if (ns6||ie){ enabletip=false tipobj.style.visibility="hidden" pointerobj.style.visibility="hidden" tipobj.style.left="-1000px" tipobj.style.backgroundColor='' tipobj.style.width='' } } document.onmousemove=positiontip //]]> </script>

• Simpan template sobat

Sekarang tinggal memasang kode pada postingan atau di mana saja ingin ditampilkan (bisa pada link referral atau banner sobat)

<a onmouseover="ddrivetip('Situs aneka Informasi Online', 240)" onmouseout="hideddrivetip()" href="http://www.anekanews.com" target="_blank">AnekaNEWS.com</a>

Kode yang berwarna merah dan biru adalah kode tolltip yang ditambahkan. Silahkan ganti yang berwarna biru (kalimat yang akan muncul ketika link disentuh) dengan kalimat sobat sendiri.

Stabilow Hijau  ganti sesuai dengan keinginan, misalnya "Klik di sini" 

Stabilow Kuning ganti dengan link target sobat 

Adapun jika sobat ingin merubah tampilan tooltipnya, silahkan utak atik kode CSSnya. Semoga postingan ini bermanfaat !
*) Trik ini dipelajari di blog O-OM.com