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
Hola, tengo una pregunta, cual es el codigo que iría en la clase «fas fa-dragon»? Estoy intentando hacer esto en una imagen pero no logro hacer que funcione y no se si la clase deba tener algo para que funcione, gracias
«fas fa-dragon» es el css que indica font-awesome, no lo tenemos en nuestra hoja de estilos, sino que nos viene dada.
Si en lugar de un icono pones una imagen, haz pruebas con los atributos position y display para corregirlo.
Saludos!
Hola pude hacerlo funcionar pero estoy teniendo problemas con el posicionamiento del data-title respecto al elemento, se muestra muy lejos del elemento indicado, alguna solucion? La web tiene distintas imagenes y quiero que se muestre el data-title en cada una de ellas pero en cambio se muestra el data-title de cada una de ellas en la parte superior derecha de la pagina y todas en el mismo lugar
Hola!
Revisa los estilos CSS que le has indicado a la etiqueta, en principio si no le indicas un absoluto debería respetarte el origen, como en el ejemplo, que sólo le pongo el bottom para que se muestre por debajo del icono sin que lo tape.
Saludos!