Alt tag on something other than an image

Posted on 2002-04-03
Last Modified: 2012-05-04
I would like duplicate the functionality of an alt tag on a label.  So far I have been unsuccessfull trying to include the alt tag on either a label or table cell tag.  I realize that alt is supposed to be image specific but is there any other property or tag that I could use?

Question by:CMcLennan
LVL 17

Accepted Solution

dorward earned 50 total points
ID: 6915656
Alt is there to provide alternative textual content in the event that the image can not be displayed, you should never use it as a tooltip attribute.

For just about any tag (img included) you can use the title attribute, which is usually rendered as a tooltop.



The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

    * <A HREF="" TITLE="Feedback on HTML 4.0 Reference"></A>
    * <A HREF="" TITLE=" - a Perl5 CGI Library"></A>
    * <LINK REL=Alternate HREF="" HREFLANG=fr LANG=fr TITLE="Version française">
    * <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
      <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
      Yahtzee is my <EM>favorite</EM> game!

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

    * He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
    * <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
    * <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>
LVL 53

Expert Comment

ID: 6915757
Try this page:

<title>Cell ToolTip</title>
   #tooltip {background-color:lightyellow;color:black;width:150;
             border:1px solid black;visibility:hidden;width:175;
<script language="JavaScript">
var tips = new Array(5);
tips[0]="this is the default text";
tips[1]="this is text for the first cell";
tips[2]="tip for the second cell";
tips[3]="all your bases are belong to us";
tips[4]="final tip";

var TRAP=false;
var CURREL=false;
var thepos=0;
function trap()
if (TRAP)
function dragEvnt()
if (TRAP)
function hideit()

<body onLoad="CURREL=document.getElementById('tooltip');CURREL.innerHTML=tips[0]">
<table cellpadding="5" cellspacing="2" border="2">
      <td onMouseover="CURREL.innerHTML=tips[1];trap()"
         text goes here
      <td onMouseover="CURREL.innerHTML=tips[2];trap()"
         text goes here
      <td onMouseover="CURREL.innerHTML=tips[3];trap()"
         text goes here
      <td onMouseover="CURREL.innerHTML=tips[4];trap()"
         text goes here
      <td onMouseover="CURREL.innerHTML=tips[3];trap()"
        text goes here
      <td onMouseover="CURREL.innerHTML=tips[2];trap()"
         text goes here
<div id="tooltip">

Works for IE 5+ and probably Netscrap 6+

If you want it for NS4.x Lots of luck


Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Create tabs to show divs 9 35
Multiflying 2 Input Text On a Table 7 31
SSRS 2016 Rendering HTML tables 3 31
output of netstat -r in Powersshell HTML 3 28
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question