{"id":897,"date":"2021-03-20T12:00:53","date_gmt":"2021-03-20T12:00:53","guid":{"rendered":"https:\/\/learnhowwp.com\/?p=897"},"modified":"2021-05-11T06:53:34","modified_gmt":"2021-05-11T06:53:34","slug":"remove-title-text-image-hover","status":"publish","type":"post","link":"https:\/\/learnhowwp.com\/remove-title-text-image-hover\/","title":{"rendered":"How to Remove Hover Text from Images in Divi Theme"},"content":{"rendered":"\n

In this article I will share the steps to remove text you see when you hover on images in Divi theme.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"Image<\/figure><\/div>\n\n\n\n

This text is the Title Text <\/strong>of the image. The browser will show the title text when you hover over an image for a few seconds.<\/p>\n\n\n\n

Remove Text From Image Module<\/h2>\n\n\n\n

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<\/strong>. <\/p>\n\n\n\n

Please have a look at the screenshot below if you are unsure where to find the option.<\/p>\n\n\n\n

\"Image<\/figure><\/div>\n\n\n\n

Remove Hover Text From All Images Using Code<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

To remove the text from appearing on hover on all pages you have to add the below code to your website.<\/p>\n\n\n\n

Go to your Dashboard > Divi > Theme Options > Integration > Add code to the <head> of your blog<\/strong> and add the code.<\/p>\n\n\n

\n<script>\njQuery(document).ready(function($) {\n    $("img").mouseenter(function() {\n        let $lwp_title = $(this).attr("title");\n        $(this).attr("lwp_title", $lwp_title);\n        $(this).attr("title", "");\n    }).mouseleave(function() {\n        let $lwp_title = $(this).attr("lwp_title");\n        $(this).attr("title", $lwp_title);\n        $(this).removeAttr("lwp_title");\n    });\n});\n<\/script>\n<\/pre><\/div>\n\n\n
If you are not sure where to add the code then here is a screenshot to help you.<\/p>\n\n\n\n
\"Divi<\/figure><\/div>\n\n\n\n
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.<\/p>\n\n\n\n
Here are some popular tutorials from the blog that you can read next.<\/p>\n\n\n\n