// display a tool-tip with content pText at the current mouse-coordinates
function showToolTip( pText )
{
  var text = pText;

  if ( text.length>0 )
    document.getElementById("tooltip_content").innerHTML = text;
  with ( document.getElementById("tooltip_container").style )
  {
    left = mouseXPos + "px";
    top  = mouseYPos + 15 + "px";
    visibility = "visible";
  }
}
// hide tooltip text
function hideToolTip()
{
  document.getElementById("tooltip_container").style.visibility = "hidden";
}

//write one tool-tip container to the html-output:
document.writeln( "<div id=\"tooltip_container\" >"
    +"<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"
    +"      		<tr>"
    +"      			<td width=\"6\" height=\"6\" align=\"left\"><img src=\""+getContextPath()+"/images/public/tooltip/tooltip-t-left.png\" width=\"6\"	height=\"6\" /></td>"
    +"      			<td background=\""+getContextPath()+"/images/public/cur-top-bgd.gif\"><img	src=\""+getContextPath()+"/images/public/cur-top-bgd.gif\" width=\"1\" height=\"6\" /></td>"
    +"      			<td width=\"6\" height=\"6\" align=\"right\"><img src=\""+getContextPath()+"/images/public/tooltip/tooltip-t-right.png\" width=\"6\"	height=\"6\" /></td>"
    +"      		</tr>"
    +"      		<tr>"
    +"      			<td width=\"6\" align=\"left\" valign=\"top\" background=\""+getContextPath()+"/images/public/bE-bgd-left.gif\"><img src=\""+getContextPath()+"/images/public/px.gif\" width=\"1\" height=\"1\" /></td>"
    +"      			<td align=\"center\" valign=\"top\" bgcolor=\"#FFFFFF\" class=\"futurDesc\" id=\"tooltip_content\">"
    +"      			</td>"
    +"      			<td width=\"6\" align=\"left\" valign=\"top\" background=\""+getContextPath()+"/images/public/bE-bgd-right.gif\"><img src=\""+getContextPath()+"/images/public/px.gif\" width=\"1\" height=\"1\" /></td>"
    +"      		</tr>"
    +"      		<tr>"
    +"      			<td height=\"6\" align=\"left\" valign=\"top\"><img src=\""+getContextPath()+"/images/public/tooltip/tooltip-b-left.png\" width=\"6\" height=\"6\" /></td>"
    +"      			<td align=\"left\" valign=\"top\" background=\""+getContextPath()+"/images/public/bE-bgd-bottom.gif\"><img	src=\""+getContextPath()+"/images/public/px.gif\" width=\"1\" height=\"1\" /></td>"
    +"      			<td align=\"left\" valign=\"top\"><img src=\""+getContextPath()+"/images/public/tooltip/tooltip-b-right.png\" width=\"6\" height=\"6\" /></td>"
    +"      		</tr>"
    +"      	</table></div>");

with ( document.getElementById("tooltip_container").style )
{
  top = "0px"; left = "0px"; zIndex = 99999; // to obscure all other divs
  // setting width/height to '0px' would work for IE but not for FF, leaving both out works for both, however...
  visibility = "hidden"; position = "absolute"; // relative to parent-div
}