TUTORIALES MAQUETACION CSS
ToolTip avanzado con CSS
Tutorial por Jorge Oyhenard (elQuique)
SoloPhotoshop
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 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>
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>
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
Tambien ahi te puedes bajar el archivo index.html completo :)
Comentarios de TUTORIALES MAQUETACION CSS
↑ Tutorial
jvidaurre
2006-08-11 20:24
phatiga
2007-08-30 12:20
altanvi
2007-09-19 02:01