Foros del Web » Creando para Internet » CSS »

tooltip con CSS y ¿offset?

Estas en el tema de tooltip con CSS y ¿offset? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/02/2009, 08:44
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 9 años, 5 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!!!
  #2 (permalink)  
Antiguo 06/02/2009, 08:38
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 9 años, 5 meses
Puntos: 5
Respuesta: tooltip con CSS y ¿offset?

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

gracias y saludos
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!
  #3 (permalink)  
Antiguo 06/02/2009, 16:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: tooltip con CSS y ¿offset?

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:
Cita:
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;}
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 09/02/2009, 03:10
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 9 años, 5 meses
Puntos: 5
Respuesta: tooltip con CSS y ¿offset?

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
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:01.