If you’re an avid Tumblr blogger and have suddenly realised your hover text (tooltips) are missing from your photos, your day is about to get better.
Something brought to my attention recently is the lack of tooltips that appear for photos posted on Tumblr, even when a caption/description is provided using the editor.
Code-Monkey explanation
What’s actually happening here is that Tumblr/Tiny MCE is incorrectly assigning the alt text of the image. The specification outlines the use of alt text as a replacement for the image in the case that it fails to load or if the client is, in-fact, using a screen-reader, not as a tooltip (hence “alternative text”). Browsers have been using alt text as a fallback for title text for years, and this incorrect implementation is finally catching up to developers.
The tooltip text should instead be assigned to the title attribute. This is the text that shows on mouse over.
Ok, can you fix it for me?
For the blog-(and not code-)savvy, you can add a tooltip by fixing your image tags, like so:
|
1 |
<img src="/images/some_image.png" alt="My Tooltip Text" /> |
becomes:
|
1 |
<img src="/images/some_image.png" alt="Some Image" title="My Tooltip Text" /> |
I’ve noticed this behaviour most recently in Google Chrome, but I suspect other browsers will follow suit. It is in accordance with the spec, after all.
I hope this cleared things up for all you Chrome-wielding bloggers out there.