Several days ago, I noticed that the images I added using Avada’s (affiliate link) Fusion Builder were displaying the title on hover, even though I didn’t set any title attribute that would appear in the <img> HTML tag.

Note: The theme uses WordPress’ Media Library uploading system, not a built-in, separate system.

Example from my WordPress deals page.

So, the theme is doing something wrong, even if it might be somehow intended to work that way.

The support seems to confuse things as well, even though I explained it clearly, with videos and all that.

So, now, I’m going to “go public” and explain to everyone the difference between the title you add when uploading an image and the ‘Image Title Attribute’ option in WordPress.

Difference between the Media Library Title and Image Title Attribute in WordPress

Let’s start with the one that you are aware of because you bump into it all the time when uploading media files.

The Media Library Title in WordPress

When you simply add an image in WordPress via Media Library, you have the option to add a title to it, among other details.

Now, this title is used by WordPress internally, as a media title for attachment pages, galleries, and other features that might use it.

Just as you have a title for your post or page, you can have one for media files, because every media file has its own attachment page in WordPress, which is visible to the public unless you disable it.

Image attachment page

Also, if you switch from the Visual editor to the Text one, you’ll see that there’s no title attribute added to the image in the HTML <img> tag. That’s because WordPress didn’t design it to work that way.

The ‘alt’ attribute appears, but not the ‘title’.

So, if there’s no title attribute added in the <img> tag, the title won’t appear in your source code, therefore it won’t appear when someone hovers over your image.

The Image Title Attribute in WordPress

If you want to add an image title that appears in the HTML <img> tag, as well as when someone will hover over your image, then you’ll have to use the default option offered by WordPress – “Image Title Attribute”.

To access this option, you have to:

• Upload and add the image in your post or page;
• Switch to the Visual editor;
• Click on the image to select it;
• Click the Edit (pencil) icon that appears at the top of the image;
• Add a title in the Image Title Attribute field, in the Advanced Options section;
• Click the Update button.

Now, if you switch to the Text editor, you’ll see that a title attribute is added to the image in the <img> tag.

This is the title designed by WordPress to appear in your source code, as well as when someone hovers over your image.

So, if there’s a difference, why is this happening with themes?

Simply because of the confusion I’m talking about.

Some web developers don’t know that there’s a difference between the Media Library Title and the Image Title Attribute option in WordPress.

I’ve seen many users complain about this problem on different support forums for different themes, but the developers just tell them that it’s a default browser setting and it’s normal, but it’s not unless you manually add a title attribute.

WordPress doesn’t automatically add one for you!

I even got this kind of answer from one of Avada’s support representatives.

The support rep is both wrong and right here.

Wrong because the Media Library Title isn’t normally designed to work as a title attribute.

Right because if you remove the Media Library Title, the title doesn’t display on hover anymore.

But since that’s not the way it’s supposed to work in the first place, other issues can appear if you have to remove it:

1. The title will also be removed from attachment pages, galleries, and other things that might depend on those titles. That’s why WordPress created separate title options to handle different functions.
2. It can be time-consuming and annoying to keep removing past and future titles. If you uploaded 200 images before noticing that the image title is displaying on hover, how much will it take to remove them all?

What’s the solution?

1. The developers shouldn’t use the Media Library Title as a title attribute.

2. For the users that want to add a title attribute, they could add a special Title field inside the page builder element.

Let’s take Avada, for example.

Since the developers took the time to add an Alt text field for the Image element, which is pretty much useless because you can add an alt text when uploading the image, then they could add a Title field as well.

That way, you have a choice. If you want the title to appear on hover, add a title. If not, don’t add it.

How will this change with the release of Gutenberg?

Currently, in Gutenberg, when you click on the image’s Edit icon (pencil), you’ll notice that there’s no Advanced Options section anymore.

It was moved in the right sidebar, and it only contains an Additional CSS Class field.

So, as things stand right now, there won’t be a default option to add a title attribute to your images unless you choose the ‘Edit as HTML’ feature and manually add the title attribute inside the <img> tag.

But, the issue with the themes will still exist if the developers continue to use the Media Library Title as an attribute in the <img> tag!

That’s a wrap

I hope I was comprehensive enough and you understood the difference between the Media Library Title and Image Title Attribute in WordPress.

Don’t forget to share the post to help out others!

You can quickly subscribe to my newsletter by using this link.

If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.

You can also hit the follow button on Twitter and subscribe to the YouTube channel.

My WordPress website services are at your disposal!