Hello,
I have a form with some text field and with some comboboxes. I added a tooltip info to the form with the following css style:
#ToolTip{position:absolute; width: 100px; top: 0px; left: 0px; z-index:100; visibility:hidden;}
The div using this css should be on the top but in case of comboboxes it is under the box. In case of textfield and normal texts it works fine just the combobox hides its area.
Any idea?
Thanks!Here is the complete code I use. It works fine with Firefox and Opera but not with IE.
<html>
<head>
<title>Div demo</title>
<style type="text/css">
.cssTooltipText {color: #034340;background-color: #bec8d2;}
.cssHeader {font-weight: bold; color: #FF9900; background-color: #003366;}
.cssFormBorder {order: 1px solid #006699;padding: 0px;margin: 0px;align: center;}
#ToolTip{position:absolute; width: 100px; top: 0px; left: 0px; z-index:100; visibility:hidden;}
</style>
<script language="JavaScript">
var ie = document.all ? 1 : 0
var ns = (document.getElementById && !document.all) ? 1 : 0
if(ns){doc = "document.getElementById(\"ToolTip\")"; sty = ""}
if(ie){doc = "document.all."; sty = ".style"}
var initialize = 0
var Ex, Ey, topColor, subColor, ContentInfo
if(ie){
Ex = "event.x"
Ey = "event.y"
}
function MoveToolTip(layerName, FromTop, FromLeft, e){
if(ie){
eval(doc + layerName + sty + ".top = " + (eval(FromTop) + document.body.scrollTop))
eval(doc + layerName + sty + ".left = " + (eval(FromLeft) + 15))
}
if(ns){
document.getElementById("ToolTip").style.top = FromTop
document.getElementById("ToolTip").style.left = FromLeft + 15
}
}
function ReplaceContent(layerName){
if(ie){document.all[layerName].innerHTML = ContentInfo}
if(ns){document.getElementById("ToolTip").innerHTML = ContentInfo}
}
function Activate(){initialize=1}
function deActivate(){initialize=0}
function overhere(e){
if (!e) var e = window.event;
if(initialize){
if (ns) {
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=overhere
Ex = window.pageXOffset+e.clientX
Ey = window.pageYOffset+e.clientY
}
MoveToolTip("ToolTip", Ey, Ex, e)
document.getElementById("ToolTip").style.visibility = 'visible'
}
else{
MoveToolTip("ToolTip", 0, 0)
document.getElementById("ToolTip").style.visibility = 'hidden'
}
}
function EnterContent(layerName, TTitle, TContent){
ContentInfo = '<table width="150" cellpadding="4" cellspacing="0" class="cssFormBorder">'+
'<tr class="cssHeader"><td>'+TTitle+'</td></tr>'+
'<tr class="cssTooltipText"><td>'+TContent+'</td></tr></table>';
ReplaceContent(layerName)
}
</script>
</head>
<body class="cssBody" onmousemove="overhere()" >
<div id="ToolTip"></div>
<form name="demo" method="post" action="demoproc.php">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"theme/images/info.gif" onMouseover="EnterContent('ToolTip','Testpage','The combobox is over the div. Why?'); Activate();" onMouseout="deActivate()">
<input name="name" type="text"><br>
<select name="selector">
<option>test1</option>
<option>test2</option>
</select><br>
The combobox is over the div. Why?
</form>
</body>
</html>
I have a form with some text field and with some comboboxes. I added a tooltip info to the form with the following css style:
#ToolTip{position:absolute; width: 100px; top: 0px; left: 0px; z-index:100; visibility:hidden;}
The div using this css should be on the top but in case of comboboxes it is under the box. In case of textfield and normal texts it works fine just the combobox hides its area.
Any idea?
Thanks!Here is the complete code I use. It works fine with Firefox and Opera but not with IE.
<html>
<head>
<title>Div demo</title>
<style type="text/css">
.cssTooltipText {color: #034340;background-color: #bec8d2;}
.cssHeader {font-weight: bold; color: #FF9900; background-color: #003366;}
.cssFormBorder {order: 1px solid #006699;padding: 0px;margin: 0px;align: center;}
#ToolTip{position:absolute; width: 100px; top: 0px; left: 0px; z-index:100; visibility:hidden;}
</style>
<script language="JavaScript">
var ie = document.all ? 1 : 0
var ns = (document.getElementById && !document.all) ? 1 : 0
if(ns){doc = "document.getElementById(\"ToolTip\")"; sty = ""}
if(ie){doc = "document.all."; sty = ".style"}
var initialize = 0
var Ex, Ey, topColor, subColor, ContentInfo
if(ie){
Ex = "event.x"
Ey = "event.y"
}
function MoveToolTip(layerName, FromTop, FromLeft, e){
if(ie){
eval(doc + layerName + sty + ".top = " + (eval(FromTop) + document.body.scrollTop))
eval(doc + layerName + sty + ".left = " + (eval(FromLeft) + 15))
}
if(ns){
document.getElementById("ToolTip").style.top = FromTop
document.getElementById("ToolTip").style.left = FromLeft + 15
}
}
function ReplaceContent(layerName){
if(ie){document.all[layerName].innerHTML = ContentInfo}
if(ns){document.getElementById("ToolTip").innerHTML = ContentInfo}
}
function Activate(){initialize=1}
function deActivate(){initialize=0}
function overhere(e){
if (!e) var e = window.event;
if(initialize){
if (ns) {
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=overhere
Ex = window.pageXOffset+e.clientX
Ey = window.pageYOffset+e.clientY
}
MoveToolTip("ToolTip", Ey, Ex, e)
document.getElementById("ToolTip").style.visibility = 'visible'
}
else{
MoveToolTip("ToolTip", 0, 0)
document.getElementById("ToolTip").style.visibility = 'hidden'
}
}
function EnterContent(layerName, TTitle, TContent){
ContentInfo = '<table width="150" cellpadding="4" cellspacing="0" class="cssFormBorder">'+
'<tr class="cssHeader"><td>'+TTitle+'</td></tr>'+
'<tr class="cssTooltipText"><td>'+TContent+'</td></tr></table>';
ReplaceContent(layerName)
}
</script>
</head>
<body class="cssBody" onmousemove="overhere()" >
<div id="ToolTip"></div>
<form name="demo" method="post" action="demoproc.php">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"theme/images/info.gif" onMouseover="EnterContent('ToolTip','Testpage','The combobox is over the div. Why?'); Activate();" onMouseout="deActivate()">
<input name="name" type="text"><br>
<select name="selector">
<option>test1</option>
<option>test2</option>
</select><br>
The combobox is over the div. Why?
</form>
</body>
</html>