如何在 html 中的图标上显示简单的工具提示？
我在 Ruby on Rails 应用程序中使用 ActiveScaffold，为了节省表中的空间，我使用 CSS 将表中的默认“操作”文本（即“编辑”、“删除”、“显示”）替换为图标。 我还使用 action_link.add 添加了一些自定义操作（“移动”和“复制”）。
为了清楚起见，当我将鼠标悬停在图标上时，我希望弹出一个包含相关操作的工具提示（即“编辑”、“复制”）。
我以为我可以通过向标签添加一个简单的“alt”定义来做到这一点，但这似乎不起作用。
有人能指出我正确的方向吗？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（10）
alt属性用于在图像丢失或纯文本浏览器中替代图像。IE 在让
alt显示为工具提示时出错了。 事情本来就不是这样的。正确的属性是
title，当然它不会在 IE 中显示工具提示。因此，要在 IE 和 FireFox/Safari/Chrome/Opera 中显示工具提示，请同时使用
alt属性和title属性。The
altattribute 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
altappear 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
altattribute and atitleattribute.只是要添加到此线程的一个小问题...没有 alt 标签或标题标签。 alt 属性适用于图像，但页面上的所有其他元素都可以有 title 属性，这是跨浏览器兼容性的最佳选择。
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.
您想要一个“标题”标签。 我不确定这是否有必要，但我通常添加 alt 和 title 标签，以确保所有浏览器显示相同的工具提示。
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.
HTML 中的工具提示是图像标签的
alt文本的内容，但如果您使用 CSS 设置它，则可能有一个background:url(...);样式而不是图像。Tooltips in HTML are the contents of the
alttext for image tags, but if you're setting this using CSS you probably have abackground:url(...);style instead of an image.在图像上使用
alt，在链接上使用title。Use
alton the images andtitleon the links.正如 Prestaul 指出的，alt 标签适用于图像，标题适用于链接。 然而，这也依赖于浏览器......大多数浏览器应该实现将此元数据显示为工具提示的功能，但它们不需要这样做。
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.
正如 Joel Coehoom 指出的那样，我意识到我的图标实际上是背景图像，因此我创建了一个透明的 .gif 图像，其标题和 alt 属性位于背景之上，瞧 - 工具提示！
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!
好工具在这里
http://www.guangmingsoft.net/htmlsnapshot/html2image.htm
good tool here
http://www.guangmingsoft.net/htmlsnapshot/html2image.htm
您可以在测试中使用标签缩写和标题属性
例如
作为答案 https://stackoverflow.com/a/61601175/9442717
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
img 标签的 alt 属性适用于某些浏览器，但并非所有浏览器（例如某些基于 mozilla 的浏览器）。
执行此操作的“正确方法”是使用产权财产。
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.