Note: Firstly, for the ones seeking a simple answer, let’s begin by telling that the hover text comes from the title tag. If you remove the title text of the image you uploaded, hover text will not be displayed anymore when the cursor is over the image. If you want to disable hover text from all images please keep reading the article.
Not every theme works like this. Some themes add title tag automatically, no matter you do this or not. Or, instead of removing all title tags one by one, you can remove them all at once. We will look for a solution for that below.
From where does this image hover text come? Why this shows up?
This is in fact a simple HTML element. If you assign title attribute to an HTML element, that text is displayed on mouse hover. We generally use this item to provide more information about an image or link, in other words, the element on which mouse cursor is displayed.
But of course, not everyone likes it. If you want to remove hover text from Images, we have 3 solutions:
The Best Way – Remove hover text from Images with PHP
All title tags of all image files in the content of your posts will be removed. Even if you add title tag manually, it will not be displayed. The most guaranteed solution!
! Not working with Divi theme. In this case, please apply the following JavaScript solution.
Please paste the following code into your functions.php file.
add_filter( 'the_content', 'remove_images_title_attribute' );
function remove_images_title_attribute( $text ) {
// Get all title attribute tags
$result = array();
preg_match_all( '|title="[^"]*"|U', $text, $result );
// Replace all title tags with an empty string
foreach ( $result[0] as $image_tag ) {
$text = str_replace( $image_tag, '', $text );
}
return $text;
}Javascript Way – Hide hover text from Images with PHP
This is my second solution. There exists title attribute of images but when the page is load, it will delete by jQuery automatically. Unless the visitor has Javascript disabled, hover text of the image cannot be seen. Not the best way but for many cases, this is the exact solution. This works with Divi theme as well as page builders that add title tag to images automatically.
Add the following code to your Javascript code.
jQuery(document).ready(function($) {
$('img[title]').each(function() { $(this).removeAttr('title'); });
});If you don’t have a Javascript file or you don’t know how to add it, you can add the code I shared above to your website with this plugin. Or, you can learn how to add Javascript code from here.
The Simplest Solution – Plugin
Although it is the simplest method, I left this solution to the end because installing a plugin to your website for such an easy case would just increase the number of installed plugins. If this is your only solution, then the plugin called Img Title Removal is the one you are looking for. No settings – just install and activate, then you are done.
