Tooltips con CSS en el blog

Los tooltips son descripciones emergentes que ayudan a dar un mejor entendimiento sobre el contenido que se lee.

Los tooltips son y hacen lo mismo que el atributo title pero a diferencia de éstos últimos se pueden personalizar
Para crear tooltips usando sólo CSS sin Javascript para no hacer la página más lenta y pesada.

Entrar en Diseño ► Edición de HTML ►Ctorl+F → pegar

]]></b:skin> 

antes de ]]></b:skin> pegar el siguiente código CSS

a.tooltip { /* Estilos del texto*/
position: relative;
z-index: 20;
cursor:zoom-in;
text-decoration: none;
}
a.tooltip:hover {
z-index: 22;
text-decoration: none;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span { /* Estilos de la descripción */
display: block;
position: absolute;
top: 12px; left: 32px;
width: 300px;
border: 2px solid #CC00CC; /* Color del borde */
background: #00FFFF; /* Color de Fondo */
color: #000; /*Color de la Letra*/
text-align: center;
}

<a class="tooltip">Tooltips con CSS<span>Este es el mensaje que se mostrará al pasar el cursor por el Tooltip.</span></a>






Tooltips con CSSEste es el mensaje que se mostrará al pasar el cursor por el Tooltip.








Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top