Cara memasang tooltip dengan javascript

Penulis: Anawia putra | anawia.com

Biar tutorial ini menjadi bikin anda penasaran, coba anda arahkan mouse anda pada text berikut ini. Cara memasang tooltip dengan javascript Setelah mouse anda arahkan pada text diatas untuk beberapa saat, maka anda akan melihat sebuah tampilan kotak yang berisi diskripsi yang menjelaskan tentang isi dari text tersebut. Kotak yang muncul inilah yang disebut dengan tooltips. Trus bagaimana cara membuat tooltip seperti diatas? Untuk itu ikuti tutorial ini hingga selesai.

 

Untuk membuat tooltip diatas kita memerlukan kode javascript. Untuk kode scriptnya bisa anda lihat pada kotak dibawah ini.

 

<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

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>

 

Untuk mengatur bagaimana tampilan tooltip tersebut nantinya, maka disini memerlukan kode style. Kode yang diperlukan seperti berikut ini.

 

<style type="text/css">
#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;
}
</style>

 

Kode script dan style diatas sebelumnya letakkan dihosting anda. Jika anda menggunakan blogger, maka anda bisa menggunakan saran untuk meletakkan javascript seperti pada posting solusi hosting javascript di blogger . untuk kode style bisa digabungkan dengan kode style blog di atas </head>.

 

Setelah kode javascript dan style telah diletakkan dengan benar, maka selanjutnya kita meletakkan kode tooltip di tempat yang kita inginkan. Misalnya kita ingin memasang tooltip pada link referral. Dengan begitu akan membuat pembaca lebih tertarik untuk bergabung dengan referral kita. Misalnya kita ingin meletakkan tooltip di text Cara memasang tooltip dengan javascript. Maka hasilnya menjadi seperti berikut ini. Kode yang kita pasang pada sebuah link :

 

onmouseover="ddrivetip('tutorial bagaimana memasang sebuah tooltip yang membuat text menjadi lebih menarik.', 240)" onmouseout="hideddrivetip()"

 

keterangan : merah = text yang kita inginkan muncul di tooltip Biru = lebar kotak yang kita inginkan secara keseluruhan kodenya menjadi seperti berikut ini.

 

<a onmouseover="ddrivetip('tutorial bagaimana memasang sebuah tooltip yang membuat text menjadi lebih menarik.', 240)" onmouseout="hideddrivetip()" href="http://www.o-om.com/2010/02/cara-memasang-tooltip-dengan-javascript.html" target="_blank">Cara memasang tooltip dengan javascript</a>

 

jadi kode tersebut bisa kita pasang pada link refferal, banner atau yang lainnya. untuk mengubah warna background kotak tersebut bisa kita lakukan melalui style css diatas. Akhirnya selesai juga tutorial javasript episode kali ini. semoga tutorial ini bisa berguna untuk anda. Terima kasih banyak buat O-Om yang sudah mau menampilkan tulisan saya.

Penasaran siapa dibalik penulis artikel ini? Anawia putra | anawia.com