All Collections
FAQ's and Troubleshooting
How to remove the Image Title while the image is hovered
How to remove the Image Title while the image is hovered

Remove the image title, when hovered

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

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

  1. Open the Image module settings

  2. Go to Advanced Tab β†’ Attributes β†’ Image Title Text

  3. Delete any text that has been set as the Image Title Text

Remove the Image module 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

// 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);

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.

Did this answer your question?