Hide Unnecessary Image Tooltip
When you hover over some images on your Divi website, you will see the image title text appear in a tiny tooltip beside the mouse cursor. This feature is not related to SEO or alt text, so it is not important. There is not any good reason to have this tooltip show, and it can be annoying and unwanted for most users. So in this tutorial, I will show you how to hide the small Divi image title tooltip that appears when you hover your mouse over images.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Assistant!
Why work so hard? You can do this easily with a setting in our Divi Assistant plugin!
Add jQuery Snippet To Hide Image tooltip In Divi
This tutorial is much shorter than most, simply because there is no reason for it to be longer. The way this works is by adding a jQuery snippet to your website, which will target the image attribute element that appears when you hover over an image and remove it. There are several locations you can add the code, which will depend on your preferences, and these are explained also in the information toggle.
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
<script>
jQuery(document).ready(function($) {
$("img").mouseenter(function() {
let $pac_da_title = $(this).attr("title");
$(this).attr("pac_da_title", $pac_da_title);
$(this).attr("title", "");
}).mouseleave(function() {
let $pac_da_title = $(this).attr("pac_da_title");
$(this).attr("title", $pac_da_title);
$(this).removeAttr("pac_da_title");
});
});
</script>How To Hide The Divi Image title Tooltip On Hover Using Divi Assistant
Here are the simple steps to hide the Divi image title tooltip on hover using our popular Divi Assistant plugin:
- Install and activate the Divi Assistant plugin
- Click on the Media Helper tab and the Image Attributes subtab
- Enable the setting
I hope that is easy enough for you! 😉
Learn More About Divi Assistant!
Our flagship "helper" plugin has (141) main features to make your life easier when working with Divi!
I have tried to use the jquery method alongside the “open divi gallery with any module” code as well as a standard gallery, however, the moment I hide the title, the galleries no longer work. I’ve also tried the CSS method with little success so for now I’m using a :not in the gallery page and manually removed all the image titles. This is not ideal as I would prefer to just be able to hide the titles and then also have the galleries work whether they are standard divi galleries OR a hidden gallery that opens with a button. In the site referenced, the page where I have the hidden gallery is named projects2.
UPDATE: Disregard my previous request for support. I ended up solving the problem by using your exact jquery code to hide image titles and then added an additional bit of code to show the image alt information in place of the title or blank title if and when it exists. On the site I reference, you can see that the image titles are not displaying, the slideshows work (both the hidden on the projects2 page and the gallery masonry layout) AND when I’ve added specific alt text (like on the projects2 page), that DOES show for the user. I think I had faulty jquery code before and now that I’m using yours, it works great! Thanks for all you do and instruction you provide!!!
Thanks for the update! So glad to hear you got it working!
I’ve used this solution before, but I’ve also tried this CSS snippet and it *appears* to work and is much easier. Any reason not to use this instead of the JS?
/* Hide image titles on hover, unless they’re inside of something with a ‘showTitle’ class */
img { pointer-events:none; }
.showTitle img { pointer-events:auto; }
Neither one is easier than the other, but the JS is more reliable. There are reports of some issues with the CSS method, so we went with the JS method instead.