Tengo un tooltip hecho solo con CSS. Cuando paso arriba de un link el tooltip aparece y cuando suleto desaparece.
En IE cuando aparece en lugar de aparecer sobre el resto del contenido, hace que el contenido que esta despues de el en el codigo, se corra hacia abajo.
Código PHP:
<div id="forms-box-2">
<a href="#" class="info">¿Cual es el tema del dia? (este es el link del tooltip)<span>Este es el texto que va a aparecer en el tooltip</span></a>
<form id="submitform" action="" method="post">
<h3>Titulo</h3>
<div class="form-left">
<fieldset>
<p>Tu nombre</p>
<input type="text" name="name" />
</fieldset>
<fieldset>
<p>Tu e-mail</p>
<input type="text" name="email" />
</fieldset>
</div>
<div class="form-right">
<fieldset>
<p>Mensaje</p>
<textarea rows="5" cols="20" name="message"></textarea>
</fieldset>
</div>
<div class="enviar">
<fieldset>
<input type="submit" value="Enviar" alt="Enviar" class="submit" />
</fieldset>
<div id="error"></div>
</div>
</form>
</div>
Código HTML:
#forms-box-2{
width:430px;
margin:20px 20px 5px 20px;
padding:0;
float:left;
}
.form-left{
width:210px;
float:left;
}
.form-right{
width:210px;
float:right;
}
.enviar{
width:430px;
float:left;
margin:0;
padding:0;
}
a.info{
position:relative;
z-index:24;
text-decoration:none;
}
a.info:hover{
z-index:25;
}
a.info span{
display: none;
}
a.info:hover span{
display:block;
position:absolute;
top:25px;
left:-108px;
width:300px;
border:3px solid #97add2;
background-color:#e3edfe;
color:#000;
padding:8px 10px;
}
Aqui pueden ver una captura del error.
Espero puedan ayudarme.
Muchas gracias!
