Hola amigos, como estan, espero me puedan dar una mano con el siguiente tema:
Tengo un "tooltip" sobre unas cajas de textos, con IE8 y con Firefox funciona correctamente, pero con IE7 el tooltip se ubica debajo del texto:
Código HTML:
<!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">
<head>
<style type="text/css">
/* All form elements are within the definition list for this example */
dl {
font:normal 12px/15px Arial;
position: relative;
width: 370px;
}
dt {
clear: both;
float:left;
width: 160px;
padding: 4px 0 2px 0;
text-align: left;
z-index:1;
background-color:#F8F8F8;
}
dd {
float: left;
width: 200px;
margin: 0 0 8px 0;
padding-left: 6px;
z-index:1;
}
/* The hint to Hide and Show */
.hint {
display: none;
position: absolute;
right: -180px;
width: 200px;
margin-top: -1px;
border: 1px solid #c93;
padding: 10px 12px;
/* to fix IE6, I can't just declare a background-color,
I must do a bg image, too! So I'm duplicating the pointer.gif
image, and positioning it so that it doesn't show up
within the box */
background: #ffc url(Templates/Basic/Img/pointer.gif) no-repeat -10px 5px;
z-index:100;
}
/* The pointer image is hadded by using another span */
.hint .hint-pointer {
position: absolute;
left: -10px;
top: 5px;
width: 10px;
height: 19px;
background: url(Templates/Basic/Img/pointer.gif) left top no-repeat;
}
.hint1 { display:none;
position: absolute;
right: -190px;
width: 200px;
margin-top: 0px;
border: 1px solid #c93;
padding-left: 5px;
padding-top: 10px;
padding-bottom:10px;
background-color: #ffc;
z-index:100;
}
</style>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
inputs[i].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
inputs[i].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
var selects = document.getElementsByTagName("select");
for (var k=0; k<selects.length; k++){
selects[k].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
selects[k].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
</script>
</head>
<body>
<form id="FormStep2" name="FormStep2" method="post" action="">
<table width="759" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="13"> </td>
<td width="370"><dl>
<dt><span class="style8">
Campo 1
</span></dt>
<dd>
<input
name="ShopperName"
type="text"
id="ShopperName" maxlength="70" />
<span class="hint">Ayuda campo 1<span class="hint-pointer"></span></span> </dd>
</dl></td>
<td width="383" valign="top"><dl>
<dt>Campo 2</dt>
<dd>
<input
name="claveb"
type="text"
id="label" onkeypress="return checkIt(event)" maxlength="30" />
<span class="hint">Ayuda campo 2<span class="hint-pointer"></span></span></dd>
<div align="left" ></div>
</dl><div id="DivElectron"></div></td>
</tr>
</table>
</form>
</body>
</html>
<script>
prepareInputsForHints();
</script>
Mil gracias.