How To Hide The Divi Image TITLE On Hover (The Easy Way)

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.

Join +3 054 subscribers!

Before (image title on hover)

Divi image displaying title tooltip on hover

After (no image title on hover)

Divi image without displaying the title tooltip on hover

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.

Title text in the WordPress Media Library

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.

Title text in the Divi Image module

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.

⚠️ A more radical jQuery solution : Hide the title text completely from the HTML code

If you want to hide the title attribute from your source code completely, you can use the script below instead. However, I wouldn’t recommend this method since this means that you can’t use the title attribute at all.

<script>
jQuery(document).ready(function($) {
    $('img[title]').each(function() { $(this).removeAttr('title'); });
});
</script>

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

Related posts

4 Comments

  1. Hi.
    But that disables lightbox also.
    Do you have a way to keep lightbox but removing the title text?

    Reply
    • Thanks for the feedback Johan! The Divi Image module lightbox works fine together with the snippet on a clean Divi installation, but there might be some optimization plugins that changes how the image tags are read. I’ve added two alternative methods for hiding the image title tooltip on hover. Let me know if any of these works better on your site. 🙂

      Reply
  2. How can I do the same for icon images, to remove the title when hovering over them?

    Reply
    • Hi Jess! That depends on how the icons are created. Can you share a link? If not, the plugin “Hide Titles On Hover: hide tooltip when hover on links” should fix it in most cases.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo