如何在 html 中的图标上显示简单的工具提示？

Question

我在 Ruby on Rails 应用程序中使用 ActiveScaffold，为了节省表格中的空间，我使用 CSS 用图标替换了表格中的默认“操作”文本（即“编辑”、“删除”、“显示”）。 我还使用 action_link.add（“移动”和“复制”）添加了几个自定义操作。

为清楚起见，当我将鼠标悬停在图标上时，我希望弹出一个带有相关操作（即“编辑”、“复制”）的工具提示。

我以为我可以通过向标签添加一个简单的“alt”定义来做到这一点，但这似乎不起作用。

有人可以指出我正确的方向吗？

Answer 1

在图像丢失的情况下，或者在纯文本浏览器中， alt属性将用作图像的替代。

IE 弄错了，当他们将alt显示为工具提示时。 本来就不是这个意思。

正确的属性是title ，它当然不会在 IE 中做工具提示。

因此，要在 IE 和 FireFox/Safari/Chrome/Opera 中都显示工具提示，请同时使用alt属性和title属性。

Answer 2

只是要添加到此线程的一个小要点……没有 alt 标签或标题标签。 alt 属性用于图像，但页面上的所有其他元素都可以有一个 title 属性，这是跨浏览器兼容性的最佳选择。

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

Answer 3

你想要一个“标题”标签。 我不确定这是否有必要，但我通常会同时添加 alt 和标题标签，以确保所有浏览器都显示相同的工具提示。

Answer 4

HTML 中的工具提示是图像标签的alt文本的内容，但如果您使用 CSS 设置它，您可能有一个background:url(...); 样式而不是图像。

Answer 5

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

Answer 6

img 标签的 alt 属性适用于某些浏览器，但不是所有浏览器（例如一些基于 mozilla 的浏览器）。

做到这一点的“ 正确方法”是使用 title 属性。

Answer 7

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

Answer 8

正如 Prestaul 所指出的，alt 标签应该适用于图像和链接的标题。 但是，这也取决于浏览器……大多数浏览器应该实现将元数据显示为工具提示的功能，但它们不是必需的。

Answer 9

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

Answer 10

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