[elQuique]

Hola, en base a una consulta que hicieron hoy en el foro se me ocurrio hacer este mini mini tutorial para generar un Tooltip sobre una imagen o cualquier url en base a CSS sin Javascript


Primero que nada creamos esta seria de instrucciones CSS en la cabecera del archivo html dentro de las etiquetas <header> o en un archivo .css aparte (mejor si tienes mucho css).

CÓDIGO

<style>
a.info {
    position:relative;
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none;
}
a.info:hover {
    z-index:25; background-color:#ff0;
}
a.info span {  // Esta es la que hace que el texto en el span no se despliegue en el estado normal de la URL
    display: none;
}
a.info:hover span {  // Esta zona es la que hace que se despliegue cuando nos ubicamos sobre el texto de la URL o la imagen dentro de la URL
    display:block;
    position:absolute;
    top:2em;
    left:2em;
    width:200px;
    border:1px solid #0cf;
    background-color:#EEEEEE;
    color:#000000;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 5px;
}
</style>

En las instrucciones donde quieras agregar el Tooltip debes hacerlo de esta forma:

CÓDIGO

<a href="#" class="info">   // Debes indicar que use la clase INFO de tu CSS
Tooltip   // es el texto de la URL y podria ir una imagen tambien
<span>   // dentro de span vas a color 1 o mas lineas que apareceran en tu tooltip
    Tutorial: Tooltip CSS<br>
    Autor: elQuique, www.forocreativo.net<br>
    Fecha: hoy mismo :)<br>
    </span>
</a>

listo

Puedes verlo funcionando aca

Tambien ahi te puedes bajar el archivo index.html completo

[Sette]

gracias

[elQuique]

De nada espero le sirva a varios

[kitsch]

Y la porra dice:

[adi]

Gracias Quique

[kahlito]

Muy bien Jorgiño

[elQuique]

Voy a ver si me doy tiempo y publico algunas otras cosillas que he recopilado de algunos trabajos que hice donde tuve que exprimir ideas jaja

[Sette]

a mi no me funciona bien, y eso que lo he hecho como mandas, míralo en http://www.manucastro.com/web.php a ver si sabes q falla

[elQuique]

Debes tener mal definido el CSS creo en la etiqueta a.info

O quizas se superpone con otra definicion en el resto de tu CSS propio

[Sette]

yo he copiado y pegado y no funciona

[elQuique]

Entonces fijate que los CSS tuyos no se superpongan a los de esta rutina

[Sette]

no lo hace, no llamo a ninguno info

[elQuique]

Pero si de pronto modificas el a o el span

Prubalo en un documento vacio , quita tu CSS, agregalo de a poco para ver donde esta el problem.

[BrAvAta07]

hola!
yo tambien lo probé! y si funciona lo unico que no, tal parece que es cuando el mouse no esta encima de el link se muestra el contenido del span, claro que sin el formato del tooltip que le diste, osea el que aparece cuando tienes el mouse sobre el link, a mi parecer no responde al evento

CÓDIGO

a.info span {
display:none;
}

estoy usando IE 6.0, ya le moví por todos lados y no logro resolverlo

saludos!!!

[elQuique]

Yo lo hice y lo probe en Firefox ( www.getfirefox.com ) pero ahora que lo comentan lo pruebo en IE y funciona bien, es que ademas eso mismo ya esta funcionando en una web que hicimos hace como 2 años y no han pataleado.

[kahlito]

A mi también me funciona en Iexplorer en Mozilla.

[elQuique]

Verifiquen a los que no les funciona que si en sus CSS anteriores tienen algun cambio de la etiqueta A o SPAN eso se superpone

[ginger]

Muchas gracias, siempre he querido aprender como se hacia eso.

[Capitan Zion]

UNA SUGERENCIA QUIQUE CUANDO SE CREA UNA HOJA DE ESTILOS INDEPENDIENTE NO ES NECESARIO ENTRAR CON <style> ya que como su extension de la esta es css. solo tienes que hacer referencia en la hoja html que estas usando o por etiquedas <div>

.color

p

#

Este tema ha sido editado por Nabuconosodor: 17 junio 2006 - 12:15

[elQuique]

Si lo se, pero como ves no esta aparte esta todo junto en index.html ya que si no complicaba la explicacion del tooltip, no me interesaba modulacion de archivos y demas yerbas.