Tooltip que descuadra >td>

[sinho6]

Buenas,

He descargado unas líneas de texto de un css, para crear un tooltip que funciona.

El problema es que está dentro de una "table", y más concretamente un "td", que cuando se muestra el tooltip hace que la fila tenga más altura y se descuadre, y no es el efecto que busco, si no que salga como un tooltip por "encima de la tabla" pero los enlaces están dentro de las filas.

Código:

a.tooltip:hover {
text-decoration:none;
}

a.tooltip span {
display:none;
}

a.tooltip:hover span {
    display:block;
    position:relative;
    top:2em;
    left:2em;
    width:200px;
    border:1px solid #4F2F4F ;
    background-color:#D8BFD8 ;
    color:#000000;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 5px;
	z-index:99;
}

Código PHP:

                echo "<tr class=\"$fila\"> 
                <td> 
                    <a href='#' class='tooltip'> 
                    ".$r['jugador']."  
                                           <span> 
                                           Nombre: ".$r['jugador']."<br> 
                                            PJ: ".$r['partidos']."<br> 
                                           Paradas: ".$r['paradas']."<br> 
                                           Goles: ".$r['goles']."<br> 
                                           Asist: ".$r['asistencias']."<br> 
                                           Sueldo: ".$r['sueldo']."<br> 
                                           Cláusula: ".$r['clausula']."<br> 
                                           </span> 
                                      </a> 
                                  </td>";  
   

Saludos y gracias.

[kseso?]

Sí. Este es el típico problema que surge a quien se va a iniciar en CSS y desconoce algo tan básico como es el tema del posicionamiento de los elementos.

Aquí puede matar los 2 pájaros de un tiro. Position y soluccionar su cuestión.

[sinho6]

Iniciado por kseso?

Sí. Este es el típico problema que surge a quien se va a iniciar en CSS y desconoce algo tan básico como es el tema del posicionamiento de los elementos.

Aquí puede matar los 2 pájaros de un tiro. [URL="http://ksesocss.blogspot.com/2012/04/repaso-lo-basico-y-lo-mas-nuevo.html"]Position[/URL] y soluccionar su cuestión.

Me has cazado

Me dispongo a leerlo tu link, y a ver lo soluciono.

Muchas gracias.

[sinho6]

Iniciado por kseso?

Sí. Este es el típico problema que surge a quien se va a iniciar en CSS y desconoce algo tan básico como es el tema del posicionamiento de los elementos.

Aquí puede matar los 2 pájaros de un tiro. [URL="http://ksesocss.blogspot.com/2012/04/repaso-lo-basico-y-lo-mas-nuevo.html"]Position[/URL] y soluccionar su cuestión.

Lo intento, pero me sigue fallando. He intentado con "z-index" para decir que el tooltip está por encima de la tabla pero sigue descuadrando la fila.

Código:

a.tooltip:hover span {
    display:block;
    position:relative;
    top:2em;
    left:2em;
    width:200px;
    border:1px solid #4F2F4F ;
    background-color:#D8BFD8 ;
    color:#000000;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 5px;
	z-index:99;
}

Si lo que estoy diciendo es que la posición es relativa, y que está por delante de la tabla en el eje z ¿cual es la razón por la que me sigue descuadrando la tabla cada vez que se muestra un tooltip? :(

[sinho6]

Iniciado por sinho6

Lo intento, pero me sigue fallando. He intentado con "z-index" para decir que el tooltip está por encima de la tabla pero sigue descuadrando la fila.

Código:

a.tooltip:hover span {
    display:block;
    position:relative;
    top:2em;
    left:2em;
    width:200px;
    border:1px solid #4F2F4F ;
    background-color:#D8BFD8 ;
    color:#000000;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 5px;
	z-index:99;
}

Si lo que estoy diciendo es que la posición es relativa, y que está por delante de la tabla en el eje z ¿cual es la razón por la que me sigue descuadrando la tabla cada vez que se muestra un tooltip? :(

No sé porque tenía la idea de que posición absoluta, se refería a posición absoluta SIEMPRE, y no, respecto al elemento contentedor... palabra clave de todo esto.

Me ha servido para leerme tu enlace y bajarme un manual css.

Gracias.

[kseso?]

Enhorabuena.
No hay como encontrar la solucción por uno mismo.

Todo radicaba en el valor de /position/.
z-index afecta al apilamiento de los elementos en el eje Z (ojos del visitante-medio en el que se muestran). Se ve afectado por el valor de /position/ (con static no aplica).

Se merece un pequeño reconocimiento su esfuerzo.