Creating Tooltips

GM-University

Jul 15 2005, 01:59 PM

Here is a little tutorial to make those small yellow-background boxes (tootltips) that pop-up for some links that describe them when you hover the mouse over them, it uses DHTML, CSS, HTML, and Javascript, so it gives us a much more wide range than my previous tutorials that just where on HTML.
OK, so here we go...

Put this right under <body>

CODE

<div id="dhtmltooltip"></div>
<script type="text/javascript">

var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
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") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thecolor, thewidth){
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 curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

var leftedge=(offsetxpoint<0)? offsetxpoint*(-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=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
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+offsetxpoint+"px"

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

</script>

Put this with your CSS <style> tag, or .css file.

CODE

#dhtmltooltip {
position: absolute;
width: 150px;
border: 1px solid #C1C1C1;
padding: 2px;
background-color: #EFEFEF;
color: #000000;
visibility: hidden;
z-index: 100;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

And put this in your link

CODE

onMouseover="ddrivetip('Your tooltip text','black', 300)";
onMouseout="hideddrivetip()"

A link example would be

CODE

Comment/Reply (w/o sign-up)

AzNxSuperNova

Jul 15 2005, 11:56 PM

I personally tried this tutorial and it was very straight forward. I was able to get the results and find that it can easily be customized to suit your needs through the CSS <style> tag. I also would like to point out that when I opened it in Internet Explorer, it was initially blocked with Internet Explorer saying that it was restricting the file from showing active content that could access your computer. However, I'm not sure if other browsers block it. Either way, it was a great tutorial and very helpful.

Comment/Reply (w/o sign-up)

GM-University

Jul 16 2005, 12:47 PM

QUOTE (AzNxSuperNova @ Jul 15 2005, 11:56 PM)

I personally tried this tutorial and it was very straight forward. I was able to get the results and find that it can easily be customized to suit your needs through the CSS <style> tag. I also would like to point out that when I opened it in Internet Explorer, it was initially blocked with Internet Explorer saying that it was restricting the file from showing active content that could access your computer. However, I'm not sure if other browsers block it. Either way, it was a great tutorial and very helpful.