Search code examples
htmlresponsive-designwebfontsfont-awesome

How to enable text tips for Webfonts, like one does in images using ALT?

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.

Solution

  • 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.