Comunidad de diseño web y desarrollo en internet online

tooltips solo con css

Citar            
MensajeEscrito el 29 Dic 2007 01:33 am
Hola a todos/as
No se si sera la mejor manera de hacerlo, pero asi lo he hecho y me falta un pequeño detalle.
He hecho un calendario con tablas, y lo he puesto en una div pequeña que solo muestre un mes, con la barra del scrol. ahora tengo que poner, solo en algunos dias, unos pequeños textos. la manera son los tooltips, todo perfecto. los tooltips los he creado con css, con a:hover y display:none. el problema viene que el tooltip sale solo por dentro de la div, aun poniendole z-index, no consigo que se ponga por encima.
alguna sugerencia ?
otra solucion seria hacer los tooltips con javascript, pero como no lo domino, prefiero usar otras tecnicas.
seria la solucion abandonar el css para este tema ?
un saludo y gracias.

Por marxa

15 de clabLevel



 

Sabadell

mozilla
Citar            
MensajeEscrito el 29 Dic 2007 06:09 pm
Imagino, que el z-index lo habrás puesto, tanto en el tooltip, como en las demás capas, pues si no... a mi a veces, no me funciona.

Otra cosa, es que eencontrarás unos tooltis muy chulos aquí
Y muchas más otras cosas en MOOTOOLS

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 31 Dic 2007 12:23 am
Hola a todos/as
Primero dar las gracias a rizome, por su respuesta, pero es lo que decia , el js no lo entiendo, y poner una cosa sin conocerla, prefiero primero conocerla, ( que estoy en ello), pero es que la sencilles del css, para mi no tiene rival.
por otro lado He conseguido ampliar el espacio y ya casi salen los tooltips completos, simplemente poniendo padding, pero solo lo puedo poner en horizontal, ya que en vertical se me destapa el calendario. pongo un enlace de las pruevas que estoy haciendo para que quede mas claro y ahora me han salido mas problemas
El numero que esta en <a href queda por encima del tooltip, es posible bajarlo de capa, ( esto solo lo hace en IE )
pero lo ideal para mi idea seria que el tooltip saliera en el cuadro rojo que he puesto debajo del calendario (en las pruevas)
Es posible que salga con posiciones absolutas del contenedor ?

el ejemplo www.marxa.biz

un saludo y gracias.

Por marxa

15 de clabLevel



 

Sabadell

mozilla
Citar            
MensajeEscrito el 31 Dic 2007 06:04 am
Bueno, veo que tus tooltip estan un poco grandes, si quieres tratar con tooltips normalitos :P de esos que no hacen multilinea es de lo mas facil

En el tag
pones
title="hola este es el tooltip"

ejemplo

Código :

<a href="url" title="Este es el tooltip">prueba de tooltip</a>


:D


espero que te sirva esta opcion ;)

Libre de javascript xD

Por tribak

Claber

2448 de clabLevel

6 tutoriales

Genero:Masculino   Héroes

Fotógrafo o algo

firefox
Citar            
MensajeEscrito el 31 Dic 2007 11:05 am
Hola a todos/as
Gracias tribak, pero yo lo quiero multilineas, ademas el title se demora un poco para aparecer.
lo que quiero dar es una pequeña informacion,( dos lineas en un pqueño tooltip ) del evento de ese dia, pero que salga bien independientemente del dia en el que este.

un saludo y gracias.

Por marxa

15 de clabLevel



 

Sabadell

mozilla
Citar            
MensajeEscrito el 31 Dic 2007 03:40 pm
La pregunta quizá sería...
¿porqué no usar JavaScript?
Porque con un "onmouseover", quedaría muy sencillo si reservas un espacio fijo, siempre el mismo, para los comentarios, de manera que cuando pasases por encima de las celdas marcadas, cambiases con "innerHTML" el contenido de dicha celda reservada.
<td title="lo que quieras poner" onmouseover="javascript:document.getElementById('celda_de_tooltips').innerHTML=this.title;" onmouseout="javascript:document.getElementById('celda_de_tooltips').innerHTML='';" style="cursor:hand;">dia</td>

De esta manera, consigues, además, mejor compatibilidad con navegadores que no tengan activado el CSS ni JavaScript.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 31 Dic 2007 07:30 pm
Gracias rizome, parece una buena idea, pero, como digo de javascript, estoy intentando entenderlo y no se como aplicarlo.
pregunta:
donde pone "celda_de_tooltips" que tengo que poner ?
despues de innerHTML=";" que tengo que poner entre las comillas ?
en el <head> como le digo que ejecute javascript ?
muchas preguntas en poco espacio, pero la idea la veo muy practica.

( por cierto, puedes recomendarme un tutorial para princiapiantes? )

gracias y un saludo.

Por marxa

15 de clabLevel



 

Sabadell

mozilla
Citar            
MensajeEscrito el 31 Dic 2007 07:43 pm
Veamos

Código :

<td title="lo que quieras poner"

En esta linea solo modificas lo que va a decir la tooltip

Código :

onmouseover="javascript:document.getElementById('celda_de_tooltips').innerHTML=this.title;"

En vez de celda_de_tooltips deberas poner el ID de la celda donde saldra la Tooltip

Código :

onmouseout="javascript:document.getElementById('celda_de_tooltips').innerHTML='';" style="cursor:hand;">dia</td>

Igual aca pondras el mismo ID y en donde dice dia pondras el dia que tiene la tooltip

entre las comillas de innerHTML=";" no pondras nada

Solo se modifican esas 4 cosas

1. El texto de el tooltip
2. El ID de la celda en el mouseover
3. El ID de la celda en el mouseout
4.El dia de la celda

Te recomiendo que pongas ese javascript en un documento de dreamweaver nuevo para que puedas ver su funcion y modificarla

Por tribak

Claber

2448 de clabLevel

6 tutoriales

Genero:Masculino   Héroes

Fotógrafo o algo

firefox
Citar            
MensajeEscrito el 31 Dic 2007 07:45 pm
acerca del tutorial puedes revisar este

Por tribak

Claber

2448 de clabLevel

6 tutoriales

Genero:Masculino   Héroes

Fotógrafo o algo

firefox
Citar            
MensajeEscrito el 31 Dic 2007 07:52 pm
Hola! Bueno, no sé si lees bien en inglés, pero acá hay un tuto de tooltips sólo en CSS. Igual, se entiende porque no necesita mucha explicación. Espero te sirva. ^^

Por Elke

321 de clabLevel



 

La Ciudad de la Furia

firefox
Citar            
MensajeEscrito el 31 Dic 2007 07:55 pm
Si, claro... como que te va a servir más si te pongo el link... :lol: :lol:

http://psacake.com/web/jl.asp

(eso es por escribir mientras estoy al teléfono con mi mamá... :oops: )

Por Elke

321 de clabLevel



 

La Ciudad de la Furia

firefox
Citar            
MensajeEscrito el 01 Ene 2008 09:11 pm
Hola a todos/as
Gracias tribak todo OK es justo lo que queria, sencillo y practico.
en cuanto al tuto, tambien, precisamente en el mismo site pero en css, aprendi lo que se de css, pero por cosas de la informatica, perdi el enlace.

elke, ya pase por esta pagina en ingles, pero como yo antes de preguntar, busco y busco mucho, pase por una en español, que pongo el enlace, porque esta muy interesante para tooltips y otros temas.
que igual ya conoces, pero lo pongo.

http://vagabundia.blogspot.com/2006/11/tooltips-usando-css.html

Gracias y un saludo.
Xavier.

Por marxa

15 de clabLevel



 

Sabadell

mozilla
Citar            
MensajeEscrito el 01 Ene 2008 09:49 pm
:D pues que bueno que al fiun se soluciono tu problema ;)

y ya sabes lo que sea aca estamos para ayudarte

Por tribak

Claber

2448 de clabLevel

6 tutoriales

Genero:Masculino   Héroes

Fotógrafo o algo

firefox
Citar            
MensajeEscrito el 01 Ene 2008 10:47 pm
Hola atodos/as.
Problema de ultima hora. Al deja el raton encima del numero del calendario, me sale el tooltip credo con javascript en su correcto lugar y al momento el tooltip clasico de navegador encima del puntero.
se puede evitar esto ?
poniendo otra cosa en vez de "title" ? con "alt" solo funciona en explorer
Dandole mucho retardo a la salida del "title ?
son preguntas a las cuales no encuentro respuestas

un saludo y gracias

Por marxa

15 de clabLevel



 

Sabadell

mozilla

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.