tooltip con CSS y ¿offset?

[matak]

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

[matak]

venga amigo...suna ayudita, please...

gracias y saludos

[Mikmoro]

A los que quieres que aparezcan a la izquierda ponles una clase diferente de la actual, como.
<a class="Ntooltip_izq" href="#">

Ahora a los selectores CSS les añades esa clase y cambias el desplazamiento del span:

a.Ntooltip, a.Ntooltip_izq {
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, a.Ntooltip_izq:hover {
z-index:999; /* va a estar por encima de todo */
background-color:#000000; /* DEBE haber un color de fondo */
}

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

a.Ntooltip:hover span, a.Ntooltip_izq: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; /* 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 */
}
a.Ntooltip:hover span {left:2em;}
a.Ntooltip_izq:hover span {left:-2em;}

[matak]

Gracias Mikmoro por contestar,

En principio asi queda solucionado. Lo que yo me refería es si de alguna forma se puede detectar si la capa span se va fuera por la derecha use la clase de mostrarlo por la izq, Si seva por abajo use la clase de mostrarlo por arriba. Algo asi, para que fuera más autamático.

Pero bueno, me pienso que lo que pido no debe ser posible con CSS.

Otra vez, Gracias Mikmoro.

Saludos