Hola, tengo un problemilla que me gustaría solucionar, tengo una página web con un formulario, y cada campo del formulario dispone de un interrogante que al pasar el ratón por encima debe mostrar un texto (esto lo hago con JS y queda bién), el problema es que este texto "flotante" no consigo que quede bien maquetado, no puedo situarlo donde yo quiero con la longitud que yo quiera. Más o menos tengo un código así:
<li><input type='text' /><img src='interrogante.png' class='ayuda' /><span class='msg-ayuda'></li>
y luego el código CSS es este más o menos:
.ayuda{
cursor: pointer;
position: relative
}
.msg-ayuda{
border: 1px solid #000;
bottom: 2.5em;
display: none;
max-width: 300px;
padding: 3px;
position: absolute;
opacity: 0.9;
left: 50px;
}
El primer problema está en que no coge los 300px de largo, llegando únicamente hasta donde llega el <ul>, la otra cosa también es que todo esto está metido en un <div>, y si el texto es demasiado grande en vez de sobresalir por encima del <div> este se oculta por el borde.
¿Alguna ayuda amigos? Aunque solo sea una página donde tengan algo parecido y pueda ver que han puesto. Muchas gracias, espero pronta respuesta.