0

I may be looking at this wrongly, but with Image links I used ALT to show text tip for Imagelinks. However now I am using webfonts, and I love them. However I am unsure what is the recommended method for showing any text tip information, like one would do using the ALT attribute on an image.

My code is:

<a href="Index.htm"><i class="fa fa-book"></i></a>

I am using the "fontawesome" library.

So what is a good approach for showing text help information when one hovers over the webfont?

Thanks.

SamJolly
  • 6,347
  • 13
  • 59
  • 125
  • Simply put, it can't be done using the alt attribute. You could look into a js based tooltip method though. Edit: totally misread that. You could use the title attribute on the element that uses the webfont. – ravb79 Nov 05 '13 at 16:31

1 Answers1

1

The alt attribute is not meant for tooltips, it is for providing a text alternative (when the image can’t be loaded or can’t be consumed, e.g., by search engines or blind visitors).

You probably mean the title attribute. In many desktop browsers, its content will show in a tooltip when hovering the element. (Note that some older Internet Explorer versions used the alt attribute for this, too.)

You can use the title attribute on any element.

<a href="Index.htm"><span class="fa fa-book" title="some advisory information"></span></a>

Note that you shouldn’t use the i element. Only use it for content that matches the definition in the specification (which doesn’t seem to be the case in your example). Use the span element, if no other elements is appropriate.

Also note that your example is not accessible.

unor
  • 92,415
  • 26
  • 211
  • 360
  • Unor, thanks for this. Very useful. Is your answer now accessible? – SamJolly Nov 05 '13 at 17:42
  • @SamJolly: *Your code* is not accessible. It’s an empty link. It only works for user-agents with CSS support. But it’s not CSS’s job to provide *content*. So to be accessible, you should provide an alternative link content. – unor Nov 06 '13 at 10:42