4

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?

Brent
  • 14,219
  • 12
  • 38
  • 41

10 Answers10

16

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.

Ulf Gjerdingen
  • 1,326
  • 3
  • 15
  • 20
FlySwat
  • 160,042
  • 69
  • 241
  • 308
  • YUI provides a [ToolTip widget](http://developer.yahoo.com/yui/container/tooltip/) for cross-browser purposes. – Hank Gay Sep 12 '08 at 19:10
  • 2
    Also, title actually does display a tooltip in IE. – Grant Hutchins Dec 22 '08 at 16:36
  • actually as @nertzy indicated IE will render either the alt or the title attribute but will correctly use the title attribute if both are supplied. Using `title` is recommended. – scunliffe Feb 10 '11 at 23:25
9

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>
scunliffe
  • 57,883
  • 24
  • 118
  • 156
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.

Bill the Lizard
  • 369,957
  • 201
  • 546
  • 842
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.

Ulf Gjerdingen
  • 1,326
  • 3
  • 15
  • 20
Joel Coehoorn
  • 362,140
  • 107
  • 528
  • 764
1

Use alt on the images and title on the links.

Ulf Gjerdingen
  • 1,326
  • 3
  • 15
  • 20
Prestaul
  • 76,622
  • 10
  • 80
  • 84
1

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.

Tyler
  • 27,580
  • 11
  • 83
  • 103
0

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

0

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.

Scott Dorman
  • 40,345
  • 11
  • 74
  • 107
0

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!

Brent
  • 14,219
  • 12
  • 38
  • 41
0

you can just use the tag abbr and the tittle atribute with your test eg <abbr tittle="some text"> </abbr> as that answer https://stackoverflow.com/a/61601175/9442717

Maya
  • 39
  • 3