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

题

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

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

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

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

解决方案

这 alt 如果图像丢失或在纯文本浏览器中，属性将用作图像的替代。

IE 弄错了，当他们制作时 alt 显示为工具提示。事情本来就不是这样的。

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

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

其他提示

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

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

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

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

这 ”正确的方法" 为此，需要使用 title 属性。

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

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

正如 Prestaul 指出的，alt 标签适用于图像，标题适用于链接。然而，这也依赖于浏览器......大多数浏览器应该实现将此元数据显示为工具提示的功能，但不需要这样做。

正如 Joel Coehoom 指出的那样，我意识到我的图标实际上是背景图像，因此我创建了一个透明的 .gif 图像，其标题和 alt 属性位于背景之上，瞧 - 工具提示！

许可以下： CC-BY-SA 和归因