Cómo eliminar los tooltips de imágenes al pasar el ratón en tu web

A veces estás navegando por tu web o la de un cliente y aparece ese molesto tooltip con el nombre del archivo o el título de la imagen 😬. Esto pasa porque los navegadores muestran automáticamente el contenido de los atributos title o, a veces, alt.

Si quieres una solución global, no tienes que tocar cada imagen de tu web: puedes usar CSS o JavaScript. Vamos a verlo paso a paso.

---

Solución con CSS

La forma más sencilla y ligera de ocultar tooltips es usando CSS. Solo necesitas agregar esto a tu hoja de estilos:

img[title] {
  pointer-events: none; /* Desactiva los eventos de puntero */
}
img[title]:hover::after {
  content: none; /* Evita mostrar cualquier tooltip */
}

💡 Truco adicional: Si no quieres desactivar completamente los eventos de puntero, otra opción es vaciar los title al cargar la página con JS.

---

Solución con JavaScript

Si prefieres JavaScript y quieres que se aplique a todas las imágenes automáticamente, puedes hacer algo así:

document.querySelectorAll('img[title]').forEach(img => {
  img.addEventListener('mouseover', () => {
    img.dataset.titleBackup = img.title; // Guardamos el title
    img.title = ""; // Lo eliminamos temporalmente
  });
  img.addEventListener('mouseout', () => {
    img.title = img.dataset.titleBackup; // Restauramos el title
  });
});

Esto hace que los tooltips desaparezcan solo mientras el ratón está sobre la imagen, y se restauran después. Es útil si quieres mantener la info para lectores de pantalla o SEO interno.

---

❓ FAQ

¿Por qué aparece un tooltip al pasar el ratón sobre mis imágenes?

Normalmente, los navegadores muestran un tooltip con el contenido del atributo 'title' o 'alt' de la imagen cuando pasas el cursor sobre ella.

¿Puedo ocultar los tooltips sin modificar el HTML de cada imagen?

Sí, se puede hacer de forma global usando CSS o JavaScript para que ningún tooltip aparezca al pasar sobre las imágenes.

¿Afecta esto a la accesibilidad de mi web?

Si ocultas tooltips con 'title', asegúrate de mantener descripciones accesibles con el atributo 'alt', ya que los lectores de pantalla dependen de él.