Smart Info Boxes

This example uses the onmouseover,onmouseout, and onmousemove event handlers to open an information box when the user moves the mouse over keywords. This example also uses setTimeout and clearTimeout to make the boxes persist for a few moments after the mouse moves off of the keyword. The info box title, text and dimensions are held in an associative 2-dimensional array.

Click on any of the dark-red, bold words below to pop an info box. This technique could be used to display glossary definitions.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut facilisis, dui nec gravida molestie, felis sapien aliquam leo, quis accumsan urna eros non magna. Cras dui mi, auctor in, malesuada a, iaculis et, erat. Quisque rhoncus magna quis pede. Etiam rhoncus iaculis tortor. Maecenas leo ligula, vulputate et, condimentum et, cursus sit amet, mauris. Maecenas justo. Cras in turpis. Praesent sed est a nisi tristique sodales. Quisque venenatis lectus at quam. Sed tincidunt. Duis rutrum scelerisque odio. Vestibulum sit amet nisi nec tellus vestibulum suscipit. Nulla non erat. Donec aliquet metus at massa.

You can copy the page html from the textarea below and save it to your local system.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Smart Info Boxes</title>

var oTimeOut=''
var myWidth=0
var myHeight=0

//this associative array holds the info box titles, text, and info box height/width
infoArray=new Array(3)
infoArray["gravida"]=new Array("<b>Gravida</b><br />Here is some info about gravida",200,30)
infoArray["Maecenas"]=new Array("<b>Maecenas</b><br />Here is some info about maecenas",300,30)
infoArray["mauris"]=new Array("<b>Mauris</b><br />Here is some info about mauris",200,30)

function showInfo(e,obj){
//create cross-browser event
curevent=(typeof event=='undefined'?e:event)
//clear current timeout, which closes any open info box
window.clearTimeout(oTimeOut)
//get the keyword from the span
cObjText=obj.innerHTML
//look up the keyword in the associative array, get text and box dimensions
var cInfoText=infoArray[cObjText][0]
myWidth=parseInt(infoArray[cObjText][1])
myHeight=parseInt(infoArray[cObjText][2])
//here we get the initial box location on the page and 
//make sure that the entire box remains in the viewport
myX=(curevent.clientX+myWidth+20>document.body.clientWidth?(document.body.clientWidth-myWidth)-20:curevent.clientX)
myY=(curevent.clientY+myHeight>document.body.clientHeight?document.body.clientHeight-myHeight:curevent.clientY)
//here we get a reference to the infoDiv and set up its style
//properties, then make it visible
var oInfoDiv=document.getElementById('infoDiv')
oInfoDiv.innerHTML=cInfoText
oInfoDiv.style.top=myY+10+'px'
oInfoDiv.style.left=myX+'px'
oInfoDiv.style.height=myHeight+'px'
oInfoDiv.style.width=myWidth+'px'
oInfoDiv.style.display="block"
infoFlag=true;
}

//this function starts the timer which upon
//expiration calls the hideInfo2 function which
//hides the info box
function hideInfo(){
oTimeOut=window.setTimeout('hideInfo2()',500)

}

//this function hides the info box
function hideInfo2(){
document.getElementById('infoDiv').style.display="none"
}

//this function handles moving the info box as the mouse moves
//over the keyword span
function moveInfo(e,obj){
curevent=(typeof event=='undefined'?e:event)
window.clearTimeout(oTimeOut)
var oInfoDiv=document.getElementById('infoDiv')
//get viewport width
var nClientWidth=document.body.clientWidth
//get location of mousemove event
var curX=curevent.clientX
//get the scroll offset of the window to
//correctly set the top of the info box
var nScrollOffset=document.documentElement.scrollTop+5
var ie55Top=document.body.scrollTop+5
nScrollOffset=(ie55Top>nScrollOffset?ie55Top:nScrollOffset)
//set top and left of the info box
myX=(curX+myWidth+20>nClientWidth?(nClientWidth-myWidth)-20:curX)
myY=(curevent.clientY+myHeight>document.body.clientHeight?document.body.clientHeight-myHeight:curevent.clientY+nScrollOffset)
oInfoDiv.style.top=myY+10+'px'
oInfoDiv.style.left=myX+'px'

}
//-->
</script>

#infoDiv	{
	display:none;
	position:absolute;
	text-align:left;
	z-index:100;
	background-color: #00e0e0;
	font-family: arial,helvetica,sans-serif;
	font-size:0.81em;
	border: 1px solid #000;
	padding: 3px;
}

.gloss	{
	font-weight:bold;
	color: #c40000;
}
</style>

</head>

<body>
<div id="infoDiv"></div>
<h1>Smart Info Boxes</h1>
<p>This example uses the onmouseover,onmouseout, and onmousemove event handlers to open an information box when the user moves the mouse over keywords.  This example also uses setTimeout and clearTimeout to make the boxes persist for a few moments after the mouse moves off of the keyword.  The popup title and text are held in an associative 2-dimensional array.</p><p>Click on any of the dark-red, bold words below to pop an info box.  This technique could be used to display glossary definitions.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut facilisis, dui nec <span class='gloss'  onmouseover="showInfo(event,this)" onmouseout="hideInfo()" onmousemove="moveInfo(event,this)"  href="javscript:void(0)">gravida</span> molestie, felis sapien aliquam leo, quis accumsan urna eros non magna. Cras dui mi, auctor in, malesuada a, iaculis et, erat. Quisque rhoncus magna quis pede. Etiam rhoncus iaculis tortor. Maecenas leo ligula, vulputate et, condimentum et, cursus sit amet, <span class='gloss'  onmouseover="showInfo(event,this)" onmouseout="hideInfo()" onmousemove="moveInfo(event,this)"  href="javscript:void(0)">mauris</span>. <span class='gloss'  onmouseover="showInfo(event,this)" onmouseout="hideInfo()" onmousemove="moveInfo(event,this)"  href="javscript:void(0)">Maecenas</span> justo. Cras in turpis. Praesent sed est a nisi tristique sodales. Quisque venenatis lectus at quam. Sed tincidunt. Duis rutrum scelerisque odio. Vestibulum sit amet nisi nec tellus vestibulum suscipit. Nulla non erat. Donec aliquet metus at massa.</p>
</body>

</html>