How can I display simple tooltips on icons in html?

Question

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").

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

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

Can somebody point me in the right direction?

Answer 1

Tooltips in html are the contents of the alt text for image tags. But if you're setting this using CSS you probably have a background:url(...); style instead of an image.

Answer 2

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.

Answer 3

Use "alt" on the images, and "title" on the links.

Answer 4

As Prestaul pointed out, the alt tag should work for images and title for links. However, this is also browser dependent...most browsers should implement functionality that displays this metadata as tooltips but they aren't required to do so.

Answer 5

The alt property of an img tag works in some browsers, but not all (such as some mozilla-based ones).

The "right way" to do this is to use the title property.

Answer 6

The Alt attribute is to be used as an alternative to the image, in the case of the image missing, or in a text only browser.

IE got it wrong, when they made alt appear as a tooltip. It was never meant to be that.

The correct attribute for this is title, which of course doesn't do a tooltip in IE.

So, to do have a tooltip show up in both IE, and FireFox/Safari/Chrome/Opera, use both an alt attribute and a title attribute.

Answer 7

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!

Answer 8

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.

<span title="Click here to edit the foo">
  Edit
</span>

Answer 9

good tool here http://www.guangmingsoft.net/htmlsnapshot/html2image.htm