Podemos crear popups con CSS de forma fácil para mostrar la información que deseemos enseñar pero que al mismo tiempo no tengamos que ir a otra página para verla.

Los protagonistas de este truco principalmente son la propiedad overflow, que hace que se muestre el elemento (visible) cuando el cursor se sitúa encima del texto y se oculte cuando dejemos de situarnos encima (hidden), y la propiedad z-index, que hará que la capa del popup se sitúe encima de los demás elementos.

Funciona en IE5.5+/Win, Moz, Op7+, Saf, IE5/Mac
No funciona en IE5.0/Win, Op6

El código CSS para crear los popups sería así:

<style type="text/css">
.nav {
float: left;
width: 13em;
}
.nav a {
display: block;
position: relative;
color: #00f;
background-color: #fcc;
margin-bottom: 0.5em;
padding: 0.5em;
text-decoration: none;
}
/* aiuta IE/Mac (rel lh) *//*/
.linkinside {
display: block;
}
/**/
.nav a:hover {
color: #c00;
border-width: 0; /* IE */
}

#nav1 a .pop {
display: block;
color: #000;
background-color: #fcc;
width: 11em;
padding: 0.5em;
border: 0.5em #f00 solid;
position: absolute;
top: 0;
left: 13.2em;
z-index: 10; /* Saf */
visibility: hidden;
}
#nav1 a:hover .pop {
visibility: visible;
}

</style>

Para que funcione correctamente en Internet Explorer debemos aplicar comentarios condicionales:

<!--[if lt IE 8]><style>
/* In IE5.0/Win layout rovina popup, ma in 5.5 e 6 serve per hover su intero blocco
(in 5.0 ok grazie a relative su 'a', in 5.5+ problemi 'interlinea') */
.nav a {
zoom: 1;
}
</style><![endif]-->

El código HTML sería este:

<div><a name="a"></a><a name="b"></a><a name="c"></a></div>

<div class="nav" id="nav1">
<a href="#a">

<span class="linkinside">Link number one</span>
<span class="pop">
This is a long explanation of link one, blah, blah, blah, ...
</span>
</a>
<a href="#b">
<span class="linkinside">Link number two Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
<span class="pop">

This is an explanation of link two, due, zwei, 2, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</span>
</a>
<a href="#c">
<span class="linkinside">Link number three</span>
<span class="pop">
This is about link three, link three is a very interesting link, blah blah blah, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor.
</span>
</a>

</div>

Podemos ver un ejemplo de su funcionamiento.

Compartir/Guardar