Comunidad de diseño web y desarrollo en internet online

hover muestra titulo

Citar            
MensajeEscrito el 24 Ene 2010 12:31 am
Hola
quiero saber si se puede con css mostrar el contenido de la etiqeta title con la funcion css. pero que a su vez lo muetre con un estilo se entiende?

Por juaann

33 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Ene 2010 12:47 am
Te refieres a estilizar el cuadradito amarillo que muestran los navegadores con el contenido del atributo title?

Este cuadradito?



Pues que yo sepa no se puede, pero quién sabe, hoy en día todo es posible. XD

Por Drake

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Ene 2010 01:48 am
exaacto eso es lo q busco debe haber una forma porq lo eh visto, en facebook por ejemplo en la barra de abajo esta ese efecto

Por juaann

33 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Ene 2010 03:30 am
Podrías poner una imagen mostrando ese efecto? Porque yo la veo del color amarillo típico. Quizás sea cosa del navegador que utilices, ni idea xD

Por Drake

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Ene 2010 03:37 am
Eh investigado y no es con la etiqeta title sino con alt

Por juaann

33 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Ene 2010 03:19 pm

Código css escribió:

elemento:after {
content: attr(title);
background: /*tu fondo*/;
color: /*tu color*/;
/*resto de propiedades*/
}

Puedes utilizar el pseudo elemento :before en vez de :after
Y en content añadir una cadena de texto a mayores o cualquier otro atributo en vez de title.
Sea el código css:

Código HTML :

a:hover:after {content: attr(title);}

Y el html:

Código HTML :

<a id="contacto" title="Usar el formulario de " "href="contacto.html">contacto</a>

Al posicionarte sobre el enlace verías:

Código generado escribió:

Usar el formulario de contacto

Ahora sólo es cuestión de que le asignes los estilos que necesites a la regla "a:hover:after"
Pero si lo utilizas con la etiqueta img debes tener en cuenta que síempre se colocará debajo (eje z) de la imagen.

Algo más sobre generar contenido con css

OTRA solución sería crear un falso tooltip:
Con :hover
Con :active

Saludos

Por DvillB

118 de clabLevel



 

firefox

 

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