El atributo title de HTML nos permite añadir información adicional en un elemento, como imagen, enlace, etc… que se suele mostrar en forma de tooltip.
El problema es que por defecto no siempre podemos controlar el aspecto de esta etiqueta, que dependerá del navegador que está utilizando el usuario, y en algunos casos puede chocar mucho con el diseño de la web:
Atributo title en una etiqueta de font-awesome para añadir más información sobre su significado
Como ocurre con los desplegables select y otros elementos nativos de HTML, no siempre podemos modificar los estilos de este tooltip directamente con CSS, y aunque hay muchas soluciones para sustituirla por una etiqueta propia, dándole estilos y comportamiento parecido, la que os comento a continuación es la más práctica y sencilla que he encontrado, mediante el atributo data-title y la propiedad content:attr(name-of-attribute)
En el ejemplo anterior, por ejemplo, si tenemos el siguiente elemento:
<i class="fas fa-dragon" title="Animales exóticos"></i>Podemos sustituir title por el atributo data-title y asignarle estilos css mediante [data-title]:
<i class="fas fa-dragon" data-title="Animales exóticos"></i>
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #333;
color: #fff;
font-size: 14px;
font-family: Raleway;
position: absolute;
padding: 3px 20px;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
border-radius: 6px;
}
[data-title] {
position: relative;
}Y de esta forma dar fácilmente estilos a la etiqueta para que se integre en el diseño de la web:
¿Fácil, verdad? Estos pequeños detalles ayudan a darle un toque extra a nuestra web.
Además, lo mismo nos sirve para cualquier otro atributo de nuestros enlaces, imágenes, etc…
Si quieres más información sobre la propiedad ‘content’ en CSS puedes echarle un vistazo a este artículo de CSS-Tricks: CSS Content
A TENER EN CUENTA:
Aunque en este post hablamos de la parte técnica de cómo dar estilo a la etiqueta title, no olvidemos que el uso de ese atributo quizás no sea la mejor opción en cuanto accesibilidad. Vicent nos deja un artículo para conocer más sobre el tema: How-to: Use title attributes
Deja un comentario