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

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 2

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 3

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 4

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 5

在图像上使用alt并在链接上使用title 。

Answer 6

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 7

这里的好工具http://www.guangmingsoft.net/htmlsnapshot/html2image.htm

Answer 8

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 9

正如 Joel Coehoom 指出的那样，我意识到我的图标实际上是一个背景图像，我创建了一个透明的.gif 图像，在背景顶部带有标题和 alt 属性，瞧——工具提示！

Answer 10

您可以在测试中使用标签 abbr 和标题属性，例如<abbr tittle="some text"> </abbr>作为答案https://stackoverflow.com/a/61601175/9442717