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

【问题标题】：How can I display simple tooltips on icons in html?如何在 html 中的图标上显示简单的工具提示？
【发布时间】：2021-04-17 23:49:46
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

IE 弄错了，他们让alt 显示为工具提示。从来都不是这样的。

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

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

【讨论】：

YUI 提供了一个ToolTip widget 用于跨浏览器的目的。
另外，title 实际上确实在 IE 中显示了一个工具提示。
实际上正如@nertzy 所指出的那样，IE 将呈现 alt 或 title 属性，但如果同时提供了两者，则将正确使用 title 属性。推荐使用title。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

img 标签的 alt 属性在某些浏览器中有效，但不是全部（例如一些基于 mozilla 的浏览器）。

“right way”是使用title属性。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

在图片上使用alt，在链接上使用title。

【讨论】：

【解决方案7】：

正如 Prestaul 所指出的，alt 标签应该适用于图像，标题适用于链接。但是，这也取决于浏览器...大多数浏览器应该实现将此元数据显示为工具提示的功能，但并非必须这样做。

【讨论】：

【解决方案8】：

意识到，正如 Joel Coehoom 所指出的，我的图标实际上是一个背景图像，我创建了一个带有标题和 alt 属性的 transparent.gif 图像，上面有背景，瞧 - 工具提示！

【讨论】：

【解决方案9】：

【讨论】：

【解决方案10】：

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

【讨论】：