There are times when we want and/or need to use the "title" attribute in links so that the page does what it's supposed to do. The problem is that sometimes we put HTML, or as my Russian friend calls it, "hutemel," code into a title attribute for our own reasons (like I do when showing associated image information on a slideshow using Lightbox), and then it shows up on mouseover/hover when the page loads.
A simple solution to hiding or altering the information that is shown in the hover/mouseover box is to be sure the img has a title, which will display instead of an href title. This is easy to implement with minimal code. If you don't want a title to show up at all, use title="" (be sure not to include a space here or the little yellow box will show up with nothing in it in IE and Safari).
<a rel="lightbox[somegroup]" title="<p>This code shows up when you hover over the image unless there is also a title attribute for the img.</p>" href="/img/lrg/blahblah.jpg"><img src="/img/sml/blahblah.jpg" title="Click to view larger image" alt="product image" /></a>
Browser Compatibility:
title="some title"
IE 7,8,9
Firefox 5
Safari 4
Chrome 12
title="" (a title box won't appear at all)
IE 7,8,9
Firefox 5
Downside to this is that the href title will be shown as a default for other browsers.
title=" " (title box appears with nothing in it)
IE 7,8,9
Firefox 5
Safari 4
Chrome 12
I wear many hats! Working for a small company affords me involvement in marketing, web design, product development, user interface and user experience design, and more fun stuff. Here are a few stories and ramblings from my personal and professional adventures.
