Image with tooltip (title attribute) displayed

How to Add a Title Tag to your Image in WordPress

It seems both WordPress and Joomla make the website editor go the extra mile to add a title tag to an image in a post.  This is the tag that allows you to describe the significance of the image.  Browsers usually display the tag’s value as a “tooltip” when the visitor hovers over the image.  Not to be confused with the “alt” tag which describes how the image looks to a visually impaired person and helps Google to rank the image.

Small five-petaled pink flowers - Leptosiphon montanusTry hovering over this image to see how your browser displays the title tag.

Both CMS’s automatically build an alt tag value when the image is first used in an article or post.  Joomla hides the setting for the title tag behind an “Advanced” tab in the JCE image editor.  That’s not helpful for encouraging a novice author to provide text for the title tag.

Today in WordPress I wanted to add a title tag to the image in my new post.  I dutifully filled in the caption, description and alt tag values in the image editor when I uploaded my image.  A title tag was automatically filled in for me.  But when viewing my post in a browser window, no tooltip on hover!

So, I went to text mode in my post and added the title tag “by hand.”  This time on hover I got an entire paragraph of text with embedded HTML markup.  So that didn’t work.  On close examination of my markup I could not see what was wrong.  So I found this helpful article by WPBeginner.

WordPress post editor, showing image selected
WordPress image editor, showing an image selected, pointing out the edit button

It explained the purpose of alt and title tags, and even explained that the “title” setting WordPress uses when the image is first uploaded, is NOT the title tag that shows as a tooltip.  The article’s directions said that, in my WordPress visual post editor, click on the image then click the edit button that appears.

Look in the “advanced” section to find a field you can fill in with the value of the title tag.

I had to hunt a while to find the “advanced” section, as it was out of view within the popup box.   But finally, “success!”Editing image title attribute - screenshot

I have figured out how to add the title tag in two ways now: if nothing special is going on with captions or other shortcodes, you can simply add a title attribute to the image in question in the post editor’s text mode; or you can use the image editor, scroll down to “advanced” settings and fill in the tag there.

By the way, in adding those last two images, I was reminded of how easy it is in WordPress to display a CAPTION for the image: you just fill in the caption field within the image source.  In Joomla how the caption is used depends entirely on the template, and it requires tricky CSS overrides on the web developer’s part, and perhaps CSS knowledge on the editor’s part, to make it look good.

Also, I accidentally selected two images and found BOTH were inserted into my article.  Does anyone have a good use for such a feature?