popupcss

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:
  2. 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;
    }
  3. Después, usaremos este código HTML para llamar al estilo. Como véis es una simple tag de enlace que llama al estilo.
  4. <a href="https://www.cssblog.es" class="tip">link <span>gato y perro</span></a>
  5. Listo, ya tendremos nuestro popup informativo creado. Se puede ver un ejemplo de su funcionamiento.