How to remove image title attribute on hover WordPress
Some page builders and themes automatically add title to each image. In this video, we will see how to remove the image title that appears when you hover over an image.
Initially, all existing images have a title attribute but when the page is load, it will delete automatically by the jQuery removeAttr() method. Not the best way but for many cases, this is the exact solution. This works with Kadence, Divi theme as well as page builders that add a title tag to images automatically.
Add the following code to your Javascript code.
jQuery(document).ready(function($) {
$('img[title]').each(function() { $(this).removeAttr('title'); });
});
Hi Tawfiqur
I would prefer a few lines of pure JavaScript::
function hide_title_attributes(){
var t = document.querySelectorAll(‘[title]’);
if(t && t.length > 0){
for(var n=0;n<t.length;++n){
var title=t[n].title;
t[n].removeAttribute('title');
t[n].setAttribute('aria-label',title);
}
}
}
hide_title_attributes();
As you can see, the code above replaces all the titles with aria-label, this is important to don't lose the accessibility of the page. Of course, you can modify it to apply it only to the images.
Of course, if jQuery is already loaded for other reasons, go with jQuery, but I always prefer pure JS when possible. By doing so you have no dependencies, and the code will work also if you don't load jQuery.
If you have to hide the titles only for the images, I would even don't use JS but only very simple CSS:
img{pointer-events:none} and that's it You will reach the same goal.
Kudos for your very interesting blog,
Your comment helped me more than the blog haha. Thank you so much.
Also thanks to tawfiq for the blog – definitely helped a little.
this shows a fatal error in divi when used with Code Snippets.
Assalaam O Elikum,
hope you doing well.
When I’m working on the website, I got a problem. I tried to solve it but that didn’t happen. I tried to find and then found your video. After watching your video I have solved my problem. Your method of teaching is very impressive and easy to learn for beginners. I recommend it to all.
Best regars:
Ramzan Chasti:
Hi Tawfiq, I used your code however it removed ALL titles from my site, not just from images. So the titles of my Portfolio pages, for example, keep being removed everytime time I add them back. I’ve removed the code and also the plugin I used, however it is still happening. Do you have any idea how to fix this / reverse your code’s effect?