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>
Si te gusta la entrada compártela.
¡Gracias!
► 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