Out of the box, all images used in the Image module or as Plain images display their title when the user hovers over them.
Note: The Image title is a very important attribute for SEO.
Remove the image title on a single image using the Image module
Open the Image module settings
Go to Advanced Tab → Attributes → Image Title Text
Delete any text that has been set as the Image Title Text
Remove image titles from all images
To remove the title attribute on all images from a website, we can use the following JS script, which can be added to Divi → Theme Option → Integration tab > Header
<script id="remove-all-images-title-attribute">
// Function to remove the title attribute
function removeTitle(event) {
// Store the title in a data attribute to retrieve it later
this.dataset.originalTitle = this.title;
// Remove the title attribute
this.removeAttribute('title');
}
// Function to restore the title attribute
function restoreTitle(event) {
// Only restore the title if it was previously stored
if (this.dataset.originalTitle) {
this.setAttribute('title', this.dataset.originalTitle);
}
}
// Get all the img elements on the page
const images = document.querySelectorAll('img');
// Add the event listeners to each image
images.forEach(img => {
img.addEventListener('mouseover', removeTitle);
img.addEventListener('mouseout', restoreTitle);
});
</script>
Note: The script will only remove the image title when the mouse pointer is over the image. As soon as the mouse pointer leaves the image, the title attribute will be returned to its initial value. This way, the page SEO is not affected.