Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/02/2009, 08:44
matak
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 15 años, 8 meses
Puntos: 5
tooltip con CSS y ¿offset?

Buenas amigos...

El problema que tengo es el siguiente...

Para una aplicación web que estoy programando tengo que mostrar el planning diario de todos los usuarios (comerciales). Lo muestro en una tabla en la que las columnas representan las horas y las filas los comerciales, es decir

Código:
____| H1 H2 H3 H4 H5....HX
COM1|___|__|__|__|__|__|__|
COM2|___|__|__|__|__|__|__|
COM3|___|__|__|__|__|__|__|
COM4|___|__|__|__|__|__|__|
....   ....   ....   ....
COMX|___|__|__|__|__|__|__|
En las franjas horarias ocupadas por alguna actividad aparecen de un color diferente y aparede una imagen que es una i de información donde quiero que al hacer un mouseover me saque un tooltip en CSS con la info de las actividades. Para ello tengo este código...

Código HTML:
<style>
a.Ntooltip {
position: relative; /* es la posición normal */
text-decoration: none !important; /* forzar sin subrayado */
color:#0080C0 !important; /* forzar color del texto */
font-weight:bold !important; /* forzar negritas */
}

a.Ntooltip:hover {
z-index:999; /* va a estar por encima de todo */
background-color:#000000; /* DEBE haber un color de fondo */
}

a.Ntooltip span {
display: none; /* el elemento va a estar oculto */
}

a.Ntooltip:hover span {
display: block; /* se fuerza a mostrar el bloque */
position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */
top:2em; left:2em; /* donde va a estar */
width:250px; /* el ancho por defecto que va a tener */
padding:5px; /* la separación entre el contenido y los bordes */
background-color: #0080C0; /* el color de fondo por defecto */
color: #FFFFFF; /* el color de los textos por defecto */
}
</style>

<a class=Ntooltip href="#">
     <img src="images/icon.gif" border="0"/>
<span>
          ... el texto oculto (cualquier código HTML) ......
</span>
</a> 
Esto funciona bien, el problema esta en que como la tabla ocupa el 100% de la página y el tooltip sale a la dercha de la 'i' pues en ultima franja horaria (la ultima columna) el tooltip se me va fuera de la pagina y aparece un scroll hotizontal.
¿Como podría hacer que en esos casos me saliera a la izquerda de la img 'i'?

¿Me interesaría mucho que fuera con CSS y no con javascript?

Espero me puedan ayudar y haberme explicado correctamente

Saludos y gracias de antemano
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!