Etiqueta en imagen cuando pasas el cursor - Tooltip

Ahora vamos a ver como hacer un Tooltip de forma sencilla. Para quien no sepa que es un tooltip, es como una especie de cartelito que aparece cuando ponemos el ratón encima de una imagen o un enlace.

Aqui el CSS:

.tooltip { display: inline; position: relative; }
.tooltip:hover:after { bottom: 26px; content: attr(title); /* este es el texto que será mostrado */ left: 20%; position: absolute; z-index: 98; /* el formato gráfico */ background: rgba(255,255,255, 0.2); /* el color de fondo */ border-radius: 5px; color: #FFF; /* el color del texto */ font-family: Georgia; font-size: 12px; padding: 5px 15px; text-align: center; text-shadow: 1px 1px 1px #000; width: 150px; }
.tooltip:hover:before { bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; /* el triángulo inferior */ border: solid; border-color: rgba(255,255,255, 0.2) transparent; border-width: 6px 6px 0 6px; }

Y aquí el HTML:

< a class="tooltip" href="" title="Diesel, 80.000km ...">Coche

Ejemplo: Coche




Mercedes Conde Blanco

Más articulos

Tweet

Escrito por Unknown

Si tienes alguna otra duda, o quieres comentar algo sobre el tema, te animo a que dejes un comentario. También puedes visitar nuestro foro. ¡Un saludo!