Remove Tooltips from Divi Gallery Images
Hey Divi Workers. So, you’ve created your cool looking Divi Gallery and you’re feeling proud of the way it looks….. until you hover over the image and ugghh, that horrible tooltip showing the title.
Simple, just get rid of the title. Mmmm, not so simple, what about the SEO consequences of that. Google won’t like you!
Okay, so we need a bit of magic that will remove the title on hover and then bring it back when we leave the image.
With this method we are targeting the anchor tag of the et_pb_gallery_image class and giving it a temporary title on hover (mouseenter) and removing the original title with the use of jQuery. The process is reversed on mouseleave. If you don’t know where to put the code check out this tutorial.
jQuery(document).ready(function($){
$( ".et_pb_gallery_image a" )
.mouseenter(function() {
var title = $(this).attr("title");
$(this).attr("temp_title", title);
$(this).attr("title","");
})
.mouseleave(function() {
var title = $(this).attr("temp_title");
$(this).attr("title", title);
$(this).removeAttr("temp_title");
});
});
Before
After
If you want to remove tooltips on other images, simply use “img” instead of “.et_pb_gallery_image a” in the code.
jQuery(document).ready(function($){
$( "img" )
.mouseenter(function() {
var title = $(this).attr("title");
$(this).attr("temp_title", title);
$(this).attr("title","");
})
.mouseleave(function() {
var title = $(this).attr("temp_title");
$(this).attr("title", title);
$(this).removeAttr("temp_title");
});
});
That’s all folks. Job done!
Leave a comment and let me know what you think.