Ver Mensaje Individual
  #4 (permalink)  
Antiguo 25/10/2010, 10:01
nene84
 
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 5
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Cuadro dialogo

Por si a alguien le interesa:

<style>
a.info {
position:relative;
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none;
}
a.info:hover {
z-index:25; background-color:#ff0;
}
a.info span { // Esta es la que hace que el texto en el span no se despliegue en el estado normal de la URL
display: none;
}
a.info:hover span { // Esta zona es la que hace que se despliegue cuando nos ubicamos sobre el texto de la URL o la imagen dentro de la URL
display:block;
position:absolute;
top:2em;
left:2em;
width:200px;
border:1px solid #0cf;
background-color:#EEEEEE;
color:#000000;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 5px;
} </style>

En las instrucciones donde quieras agregar el Tooltip debes hacerlo de esta forma:

<a href="#" class="info">
Tooltip
<span>
Texto a mostrar
</span>
</a>