ToolTip avanzado con CSS

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 o en un archivo .css aparte (mejor si tienes mucho css).

<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:

<a href="#" class="info">
Tooltip
<span>
Tutorial: Tooltip CSS<br>
Autor: elQuique, www.tallerwebmaster.com<br>
Fecha: hoy mismo :)<br>
</span>
</a>

• La etiqueta <a> debe asignarsele la classe info del CSS.
• Tooltip, es el texto de la URL y podria ir una imagen tambien
• Dentro de <span> va una o mas lineas de texto que apareceran en tu tooltip

Autor: Jorge Oyhenard
http://www.developerslive.com/

Usuarios que han visto este tema también han visto...

- Mejorando la apariencia de los formularios utilizando hojas de estilo
- Aproximación al problema del color: imagen vs CSS
- Colores en CSS
- Diseño de menús con CSS avanzado
- Maquetar una página con CSS

- Versión imprimible de este documento
- Enviar por e-mail este documento