Membuat Tooltip Sederhana – PT Proweb Indonesia

Apa itu tooltip dan apa kegunaannya?

Tooltip merupakan tampilan informasi berupa teks maupun gambar yang tampil saat cursor di arahkan (mouse over) pada sebuah item (biasanya pada link) dalam sebuah website.

Tujuan dari menggunakan tooltip ini bisa dibilang untuk menghemat waktu si pengunjung website. Dari tooltip pengunjung bisa mendapatkan penjelasan singkat dari link yang ingin dibaca. Apabila dari penjelasan singkat itu tidak membuat pengunjung merasa ingin lebih tahu, maka pengunjung cukup mengabaikan link tersebut. Begitu sebaliknya, apabila pengunjung dibuat merasa ingin lebih tahu, barulah link tersebut diklik.

Jadi, bagaimana caranya membuat tooltip?

Membuat tooltip bisa dengan menggunakan javascript atau dengan jQuery. Disini kita akan membuat satu contoh tooltip sederhana dengan menggunakan javascript.

Pertama: Pilih editor yang akan anda gunakan (notepad, notepad++, dreamweaver, dll)

Struktur dasar file html

<html>
<head>
<title>contoh tooltip</title>
</head>
<body>

</body>
</html>

Kemudian setelah tag </title>, tambahkan script css di bawah ini

#tooltip{
position: absolute;
left: -300px;
width: 250px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
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);
}

#pointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}

</style>

Pada bagian <body>, tambahkan javascript di bawah ini.

var cursorX=12 //Customize x offset of tooltip
var cursorY=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. Tip: Set it to (height_of_pointer_image-1).

document.write(‘<div id=”tooltip”></div>’) //write out tooltip DIV
document.write(‘<img id=”pointer” 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[“tooltip”] : document.getElementById? document.getElementById(“tooltip”) : “”

var pointerobj=document.all? document.all[“pointer”] : document.getElementById? document.getElementById(“pointer”) : “”

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-cursorX : winwidth-e.clientX-cursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-cursorY : winheight-e.clientY-cursorY

var leftedge=(cursorX<0)? cursorX*(-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+cursorX-offsetdivfrompointerX+”px”
pointerobj.style.left=curX+cursorX+”px”
}

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-cursorY+”px”
nondefaultpos=true
}
else{
tipobj.style.top=curY+cursorY+offsetdivfrompointerY+”px”
pointerobj.style.top=curY+cursorY+”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>

Setelah itu tambahkan tag html berikut ini.

<a href=”http://www.proweb.co.id” onMouseover=”ddrivetip(‘Corporate Web Design’)”;
onMouseout=”hideddrivetip()”>Proweb</a>

Sekarang simpan file tersebut dengan format .html dan kemudian jalankan pada browser. Maka akan terlihat seperti gambar di bawah ini hasilnya.

Mudah bukan? Nah, anda bisa mengembangkannya lagi sesuai kreatifitas anda.

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Membuat Tooltip Sederhana