ToolTip utilizando CSS

Publicado por RubenF

8 Enero, 2008

Aquí va una guía para generar un Tooltip sobre una imagen o cualquier link utilizando CSS

Primero debemos crear el estilo del tooltip.
Este puede ir en la cabecera del archivo html dentro de las etiquetas <code><style></code> o en un archivo .css aparte (esta forma resulta más prolija).

Código de Estilo:

<style>
a.ttip {
position:relative;
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none;
}
a.ttip:hover {
z-index:25; background-color:#ff0;
}
a.ttip 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.ttip: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>

Para agregar el tooltip debes utilizar el siguiente código:

A la etiqueta <code><a></code> le aplicamos la clase ttip del CSS que es la encargada de hace aparecer el tooltip

Dentro de la etiqueta <code><span></code> incluimos las lineas de texto que queremos que aparezcan en el tooltip

<a class="ttip" href="http/www.trinidadsi.com.ar">
Ejemplo de un Link de texto
<span>
Aquí se coloca el texto que<br/>
debe aparecer en el Tooltip... <br/>
Autor: www.trinidadSI.com.ar<br>
</span>
</a>