Dar estilos a un atributo title con CSS

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:

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