Algunas veces, con un enlace hacia una página no nos basta, y queremos que este enlace lleve algo de información. Se puede usar el atributo title=”", para hacer esto, pero, ¿no es más moderno utilizar CSS?

Aquí aprenderemos a crear títulos para nuestros enlaces de forma vistosa, como véis en la imagen que ilustra el artículo.

Pasos a seguir:

1. Pegamos el código CSS en nuestro documento:

a.tip {
	position: relative;
}

a.tip span {
	display: none;
	position: absolute;
	top: 20px;
	left: -10px;
	width: 125px;
	padding: 5px;
	z-index: 100;
	background: #000;
	color: #fff;
	-moz-border-radius: 5px; /* this works only in camino/firefox */
	-webkit-border-radius: 5px; /* this is just for Safari */
}

a:hover.tip {
	font-size: 99%; /* this is just for IE */
}

a:hover.tip span {
	display: block;
}

2. Después, usaremos este código HTML para llamar al estilo. Como véis es una simple tag de enlace que llama al estilo.

<a href="http://www.cssblog.es" class="tip">link <span>gato y perro</span></a>

3. Listo, ya tendremos nuestro popup informativo creado. Se puede ver un ejemplo de su funcionamiento.

Compartir/Guardar