How to display simple tooltips on icons in html?

Question

I use ActiveScaffold in a Ruby on Rails application, and to save space in the table, I replaced the default text “actions” in the table (for example, “edit”, “delete”, “show”) with icons using CSS. I also added some custom actions with action_link.add ("move" and "copy").

For clarity, I want a tooltip with a related action (ie, “edit”, “copy”) when I hover over the icon.

I thought I could do this by adding a simple definition of "alt" to the tag, but this does not work.

Can someone point me in the right direction?

Answer 1

The alt attribute should be used as an alternative to the image if there is no image or only text in the browser.

IE made a mistake when they made alt as a tooltip. It was never meant to be.

The correct attribute for this is title , which of course does not make a tooltip in IE.

So, so that the tooltip is displayed in both IE and FireFox / Safari / Chrome / Opera, use the alt attribute and the title attribute.

Answer 2

Just a small point to add to this thread ... there is no alt tag or header tag. The alt attribute is for images, but all other elements on the page may have a title attribute, which is the best choice for browser compatibility.

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

Answer 3

You need the "title" tag. I'm not sure if this is needed anymore, but I usually add alt and title tags to make sure all browsers display a tooltip of the same.

Answer 4

HTML hints are the contents of the alt text for image tags, but if you set this using CSS, you probably have a background:url(...); style background:url(...); instead of an image.

Answer 5

Use alt for images and title for links.

Answer 6

The alt property of the img tag works in some browsers, but not in all (for example, on some mozilla-based models).

the " right way " to use this title property.

Answer 7

As Prestole noted, the alt tag should work for images and link headers. However, it depends on the browser ... most browsers should implement functionality that displays this metadata in the form of hints, but they are not required to do this.

Answer 8

Understanding, as Joel Coehoom noted, my icon was actually a background image, I created a transparent image with a caption and alt attributes on top of the background, and voila - tooltips!

Answer 9

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