Tired of manually removing the title text that’s displayed as a tooltip when hovering images on your Divi website? Here’s how to hide the image hover title text globally with one line of CSS – without impacting accessibility.

What Is Image Title Text And What Is It Good For?

The Image Title text is located in the img tag in the HTML code. The purpose of the Image Title is “to provide additional information about the image”, according to Search Engine Journal.

You should not confuse the Image Title with the image Alt Text. The latter is also added in the img tag but the mission for the Alt Text is to describe the purpose of the image – as an alternative text for people that can’t see the image.

According to most SEO professionals, the Alt Text is an important factor for your search ranknings while the Title Text is not.

Where Does The Image Title Come From In WordPress?

When you upload an image to the WordPress Media Library, it automatically generates an image title from the image file name. The title text is slightly prettified with the file extension removed, but it’s still often cryptic and incomprehensible. To display the filename by default when your visitors, intentionally or unintentionally, hover your images doesn’t benefit anyone.

The Divi Image module inherits the Image Title from the Media Library when you insert the image in the module. You can find the Title Text (and the Alt Text) in the Image Module settings under Advanced » Attributes.

You could of course rephrase or delete the automatic Title Text each time you upload a new image, but that is a tiresome process. Here’s how you can change the logic globally and make the Image Title hover tooltip an option instead of being the default behaviour.

Hiding The Image Title Text On Hover Globally In Divi

By just adding a small CSS snippet, we can hide the Image Title text from being displayed on hover. This fix applies to all images on your WordPress website, not just the Divi Image module.

Since the title text remains unaltered in your HTML code, this snippet will not have any negative effect on your websites accessibility. The Image Titles are still there but they won’t display as annoying tooltips on hover by default anymore.

1. From your WordPress dashboard, go to Divi » Theme Customizer
2. Go to Additional CSS and paste the snippet below:

   /* Hide image titles on hover */
   img {
   pointer-events:none;
   }

3. Click the blue Publish button to save your changes.

That’s it! If you hover any image in fronted, you will not see the annoying tooltip anymore.

💡 You might need to clear your website cache, Divi cache and browser cache before you can see the changes.

Troubleshooting: If this method doesn’t work for you, try an alternative method using jQuery or a plugin instead.

Make Exceptions: Display Image Title On Hover For Specific Images

But what if you still want to display the title text on hover for some images? Easy peasy! Just follow the steps below:

1. From your WordPress dashboard, go to Divi » Theme Customizer
2. Go to Additional CSS and paste this snippet after the first one:

   /* Display image titles on hover exception */
   .dmdisplaytitle img {
   pointer-events:auto;
   }

3. Click the blue Publish button to save your changes.

You’re set to go! Just add the class dmdisplaytitle to the exception images in the Image Module settings » Advanced » CSS IDs & Classes »  CSS Class.

💡 You can also have the same result by adding the CSS class dmdisplaytitle to images using the Classic Editor in the Advanced Options tab in the Image Details settings.

Alternative method 1: Hide Image Title Text On Hover Using jQuery

In some cases, when using certain optmization methods, the CSS snippet above will not work as expected. If that’s the case, you can use this alternative methiod instead. It will keep the title tag in the HTML code but hide it on hover only. This way, you will not affect accessibility or SEO.

1. From your WordPress dashboard, go to Divi » Theme Options » Integration
2. Go to Add code to the < head > of your blog and paste the snippet below:

   <script>
   jQuery(document).ready(function($) {
       $("img").mouseenter(function() {
           let $notooltip = $(this).attr("title");
           $(this).attr("notooltip", $notooltip);
           $(this).attr("title", "");
       }).mouseleave(function() {
           let $notooltip = $(this).attr("notooltip");
           $(this).attr("title", $notooltip);
           $(this).removeAttr("notooltip");
       });
   });
   </script>

3. Click the green Save Changes button to save your changes.

That’s it! If you hover any image in fronted, you will not see the annoying tooltip anymore.

💡 You might need to clear your website cache, Divi cache and browser cache before you can see the changes.

Alternative method 2: Hide Image Title Text With A Plugin

Not comfortable with custom code? No problem, there is a free plugin for you that will take care of everything. It’s 100% compatible with Divi.

1. From your WordPress dashboard, go to Plugins » Add New
2. Search for Hide Titles On Hover
3. Install and activate the plugin Hide Titles On Hover: hide tooltip when hover on links from Jose Mortellaro

That’s it! You don’t have to make any settings for it to work. This is how the developer describes it:

After activation Hide Titles On Hover will replace all the titles attributes with aria-label. You will have no problems with the accessibility, but you will not see the native tooltip of the browser on hover.

No settings, just activate it and that’s it.

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: How To Autoplay Video In Divi

👉 Free course: Create a website from scratch with Divi