<p>I am using ActiveScaffold in a Ruby on Rails app, and to save space in the table I have replaced the default "actions" text in the table (ie. "edit", "delete", "show") with icons using CSS. I have also added a couple of custom actions with action_link.add ("move" and "copy").</p>

<p>For clarity, <strong>I would like to have a tooltip pop up with the related action</strong> (ie. "edit", "copy") when I hover the mouse over the icon.</p>

<p>I thought I could do this by adding a simple "alt" definition to the  tag, but that doesn't appear to work.</p>

<p>Can somebody point me in the right direction?</p>

[{'answer_id': 59226, 'author': 'Joel Coehoorn', 'author_id': 3043, 'author_profile': 'https://Stackoverflow.com/users/3043', 'pm_score': 1, 'selected': False, 'text': "<p>Tooltips in HTML are the contents of the <code>alt</code> text for image tags, but if you're setting this using CSS you probably have a <code>background:url(...);</code> style instead of an image.</p>\n"}, {'answer_id': 59227, 'author': 'Bill the Lizard', 'author_id': 1288, 'author_profile': 'https://Stackoverflow.com/users/1288', 'pm_score': 2, 'selected': False, 'text': '<p>You want a "title" tag.  I\'m not sure if this is necessary anymore, but I usually add both alt and title tags to make sure all browsers display the tool tip the same.</p>\n'}, {'answer_id': 59228, 'author': 'Prestaul', 'author_id': 5628, 'author_profile': 'https://Stackoverflow.com/users/5628', 'pm_score': 1, 'selected': False, 'text': '<p>Use <code>alt</code> on the images and <code>title</code> on the links.</p>\n'}, {'answer_id': 59245, 'author': 'Scott Dorman', 'author_id': 1559, 'author_profile': 'https://Stackoverflow.com/users/1559', 'pm_score': 0, 'selected': False, 'text': "<p>As Prestaul pointed out, the alt tag should work for images and title for links. However, this is also browser dependent...most browsers <strong>should</strong> implement functionality that displays this metadata as tooltips but they aren't required to do so.</p>\n"}, {'answer_id': 59249, 'author': 'Tyler', 'author_id': 3561, 'author_profile': 'https://Stackoverflow.com/users/3561', 'pm_score': 1, 'selected': False, 'text': '<p>The alt property of an img tag works in some browsers, but not all (such as some mozilla-based ones).</p>\n\n<p>The "<a href="http://www.mozilla.org/docs/web-developer/faq.html#alttooltip" rel="nofollow noreferrer">right way</a>" to do this is to use the title property.</p>\n'}, {'answer_id': 59260, 'author': 'FlySwat', 'author_id': 1965, 'author_profile': 'https://Stackoverflow.com/users/1965', 'pm_score': 5, 'selected': True, 'text': "<p>The <code>alt</code> attribute is to be used as an alternative to the image, in the case of the image missing, or in a text only browser.</p>\n\n<p>IE got it wrong, when they made <code>alt</code> appear as a tooltip. It was never meant to be that.</p>\n\n<p>The correct attribute for this is <code>title</code>, which of course doesn't do a tooltip in IE.</p>\n\n<p>So, to do have a tooltip show up in both IE, and FireFox/Safari/Chrome/Opera, use both an <code>alt</code> attribute and a <code>title</code> attribute.</p>\n"}, {'answer_id': 59997, 'author': 'Brent ', 'author_id': 3764, 'author_profile': 'https://Stackoverflow.com/users/3764', 'pm_score': 0, 'selected': False, 'text': '<p>Realizing, as Joel Coehoom pointed out, that my icon was actually a background image, I created a transparent.gif image with title and alt attributes over top of the background, and voila - tooltips!</p>\n'}, {'answer_id': 60008, 'author': 'scunliffe', 'author_id': 6144, 'author_profile': 'https://Stackoverflow.com/users/6144', 'pm_score': 3, 'selected': False, 'text': '<p>Just a minor point to add to this thread... there is no alt tag or title tag.  The alt attribute is for images, but all other elements on a page can have a title attribute, which is the best choice for cross browser compatibility.</p>\n\n<pre><code>&lt;span title="Click here to edit the foo"&gt;\n  Edit\n&lt;/span&gt;\n</code></pre>\n'}, {'answer_id': 370675, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>good tool here\n<a href="http://www.guangmingsoft.net/htmlsnapshot/html2image.htm" rel="nofollow noreferrer">http://www.guangmingsoft.net/htmlsnapshot/html2image.htm</a></p>\n'}, {'answer_id': 67140054, 'author': 'Maya', 'author_id': 9442717, 'author_profile': 'https://Stackoverflow.com/users/9442717', 'pm_score': 0, 'selected': False, 'text': '<p>you can just use the tag abbr and the tittle atribute with your test\neg <code>&lt;abbr tittle=&quot;some text&quot;&gt; &lt;/abbr&gt;</code>\nas that answer <a href="https://stackoverflow.com/a/61601175/9442717">https://stackoverflow.com/a/61601175/9442717</a></p>\n'}]
['https://Stackoverflow.com/questions/59221', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3764/']