How to Remove Hover Text from Images in Divi Theme

Mar 20, 2021 | Blog, Divi Tutorial | 7 comments

In this article I will share the steps to remove text you see when you hover on images in Divi theme.

When you hover over an image you will see the title of the image in a tool tip. Here is a screenshot of what the text looks like.

Image title text in tooltip on hover

This text is the Title Text of the image. The browser will show the title text when you hover over an image for a few seconds.

Remove Text From Image Module

If you are using an Image module then you can delete the Title text inside the Image module settings. The option for Title text is in Image Module Settings > Advanced > Attributes.

Please have a look at the screenshot below if you are unsure where to find the option.

Image module setting title attribute

Remove Hover Text From All Images Using Code

The option to remove title text is not present in all the modules. However with a small snippet of custom jQuery code we can stop the text from showing on hover.

To remove the text from appearing on hover on all pages you have to add the below code to your website.

Go to your Dashboard > Divi > Theme Options > Integration > Add code to the <head> of your blog and add the code.

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

If you are not sure where to add the code then here is a screenshot to help you.

Divi theme options code remove text on image hover

The code removes the title when someone hovers on an image. And then adds it back again when the mouse leaves the image. If you are worried about the code impacting your SEO because it is deleting the title then you don’t have to worry. The title is only removed on user action. The title is only deleted when you hover over the image.

Here are some popular tutorials from the blog that you can read next.

Leave a comment below if you have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

7 Comments

  1. Lisa

    Fantastic, easy fix, thank you.

    Reply
  2. CS

    Thank you so much!!! I just realized the title names where showing all over the website making it look terrible.

    Reply
  3. Cristina

    Thanks a lot!!! This is very helpful for me!

    Reply
  4. Doug Tracey

    Does this affect the SEO of the page as it removes the title? Or is the Alt text more important?

    Reply
    • Emil

      By this action, you don’t delete the title attribute at all. It is just not visible when the user hovers. So it has no impact on SEO – title attribute still remaining with the image. It was also mentioned at the end of this article. However, don’t forget about the alt attribute on your images, but it has a little different function than the title 🙂

      Reply

Submit a Comment

Your email address will not be published.

Managed WordPress Hosting Solution For Everyone

Get Started From Just $1 For The First Month