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.
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.
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.
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.
- Add a History Back Button in Divi Theme
- Remove Links on Portfolio Module in Divi Theme
- How to Move Blurb Icon to Right in Divi Theme
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.
For me it works on images but not on sliders/carousel, I found adding this to Themes Options/Custom Css works:
/* Hide image titles on hover */
img {
pointer-events:none;
}
Simple, elegant fix, that keeps SEO intact. Works perfectly. Thank you!
Thank you
Hi.
For me, this doesn’t work. I suspect it may be related to the fact that I’m using this in conjunction with it;
https://www.peeayecreative.com/how-to-move-the-divi-gallery-title-and-caption-text-over-the-image/
Here’s the live page; https://dingsbeerblog.com/pretty-pictures-of-beer/
Is there a way to use BOTH, i.e., have the desired hover effect of the title text, but also remove the grey tool tip? Thanks.
Thank you