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 +2 320 subscribers!
Before (image title on hover)
After (no image title 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.
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.
- From your WordPress dashboard, go to Divi » Theme Customizer
- Go to Additional CSS and paste the snippet below:
/* Hide image titles on hover */ img { pointer-events:none; } - 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.
⚠️ Alternative method: Remove the title text completely from the HTML code
If you want to remove 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>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:
- From your WordPress dashboard, go to Divi » Theme Customizer
- Go to Additional CSS and paste this snippet after the first one:
/* Display image titles on hover exception */ .dmdisplaytitle img { pointer-events:auto; } - 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.
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
0 Comments