Memasang Bubble Tool Tips

Memasang Bubble Tool Tips

Hai sobat udah sekian lama saya gag update blog.. duchh.... peringkat alexa jadi turun drastiss... hhhaaaa..  tapi gpp deh, ngeblog kan hanya sekedar hobby untuk mengisi kekosongan aja... :p

Oke deh cukup sekian curhatnya.... xixixi
kali ini saya mau mengshare script "Bubble Tool Tips" pada link... Apa itu tool tips?? (tuing2 apa yahh??) hha..

Bubble Tool Tips adalah Balon yang muncul kalo mouse kita mendekati link tersebut...
contohnya arahkan SINI DUNK...!!!

Nah balon yang muncul itu lah yang dinamakan Bubble toll tips.. yaps langsung saja saya kasih Javascriptnya dan bonus CSS nya.. :p

CSS :

<style type="text/css">
#dhtmltooltip{
position: absolute;
-moz-border-radius:10px;
left: -300px;
width: 150px;
border: 2px solid red;
padding: 3px;
background-color: black ; font-family:"Verdana",Arial;font-size:12px;
color: cyan;
font-family:comic sans ms;
font-size:14px;
visibility: hidden;
z-index: 100;
text-align:center;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
</style>

Javascriptnya :

<script type="text/javascript">
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>

Nah dua code diatas kamu copy di hosting kamu atau langsung kamu copy di add gadget terserah.... kalo code diatas udah di copy... sekarang tinggal langkah terakhir..

copy code ini : <a onmouseover="ddrivetip('Kata - kata kamu', 240)" onmouseout="hideddrivetip()" href="Alamat yang ditujuh" target="_blank">Contoh nya nie</a> 

Nah sekarang kamu save. dan lihat hasilnya... tinggal kamu kembangin aja.. berkreasi sendiri gitu deh... hehehehhe