Remove hover text from Images in WordPress

Remove hover text from Images in WordPress

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.

Remove hover text from images

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;
}
https://wordpress-770651-3082904.cloudwaysapps.com/add-lightbox-to-images/

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.

Comments (3)
Join the discussion
Read them all
  • Lola
    Sep 4th, 2020
    Lola says:

    Hi there! I simply wish to give a huge thumbs up for the nice information you have got right here on this post. I will be coming back to your weblog for more soon.

    reply
  • bellenubre
    Sep 12th, 2020
    bellenubre says:

    Hello i am new user and i would to ask you, How to disable avatar?

    reply
    1. Ali Demirci Author
      Sep 14th, 2020
      Ali Demirci says:

      Which avatar do you want to remove? This article isn’t about the avatar. It’s just remove image title attribute.

      reply
 

Comment

Hide Comments
Back

This is a unique website which will require a more modern browser to work!

Please upgrade today!

Share