jQuery 有没有办法像 IE 一样在 Firefox 中将 alt="text" 显示为鼠标悬停工具提示?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1734806/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to show alt="text" as a mouseover tooltip in firefox like IE does automatically?
提问by Jitendra Vyas
I don't want to repeat alt text in title again? is this possible with any javascript , jquery, css solution? or any solution which can disable to show alt=text and enable title=texr and as a tooltip?
我不想在标题中再次重复替换文字?任何 javascript、jquery、css 解决方案都可以做到这一点吗?或任何可以禁用显示 alt=text 并启用 title=texr 并作为工具提示的解决方案?
回答by Daniel Pryden
alt
text is for an alternativerepresentation of an image. title
text is for tooltips.
alt
text 用于图像的替代表示。 title
text 用于工具提示。
IE's behavior is incorrectin this regard, and Firefox will never implement it. (The bug in the Bugzilla database is #25537, which is VERIFIED WONTFIX.)
IE在这方面的行为是不正确的,Firefox 永远不会实现它。(Bugzilla 数据库中的错误是#25537,这是 VERIFIED WONTFIX。)
Not only that, but even Microsoft has admitted that their behavior is incorrect, and IE 8 doesn't show alt
text as tooltips anymore!.
不仅如此,甚至微软也承认他们的行为是不正确的,并且IE 8 不再将alt
文本显示为工具提示!
So don't rely on alt
text being displayed as a tooltip. Use title
instead.
所以不要依赖alt
显示为工具提示的文本。使用title
来代替。
回答by scunliffe
The correct way to do this is to use the titleattribute.
正确的方法是使用title属性。
e.g.
例如
<div title="This is your tooltip">...content...</div>
The "alt" attribute is only designed to provide "alternative" text when an image element is used (but not available to the user... e.g. blind users, or users with text-based browsers etc.)
“alt”属性仅用于在使用图像元素时提供“替代”文本(但对用户不可用……例如盲人用户或使用基于文本的浏览器的用户等)
回答by Gordon Gustafson
Like scunliffe says, the right way to do this is in the title
attribute. Its better to comply to the standard than rely on IE's non-standard behavior. Keep in mind the title attribute is for tooltips for users that can see the image, alt text is for users who can't (although they can see the title as well). If this really bugs you, you can just use javascript to set the title attributes to the alt attributes for all your images, giving you a cross browser effect. :D
就像 scunliffe 所说,正确的方法是在title
属性中。与其依赖 IE 的非标准行为,不如遵守标准。请记住,title 属性用于可以看到图像的用户的工具提示,替代文本用于不能看到的用户(尽管他们也可以看到标题)。如果这真的让您感到困扰,您可以使用 javascript 将所有图像的标题属性设置为 alt 属性,从而为您提供跨浏览器效果。:D
Something like this:
像这样的东西:
var images=document.getElementsByTagName("img");
for (var item in images) {
item.title = item.alt;
}
OR (W3 DOM style)
或(W3 DOM 风格)
for (var item in images) {
item.setAttribute("title", item.getAttribute("alt") );
}
OR (jQuery)
或 (jQuery)
$("img").each( function() { this.attr("title", this.attr("alt") ); }
(haven't tested any of these yet, so slight modification may be needed)
(尚未测试任何这些,因此可能需要稍作修改)
回答by ewg
Note that the user can suppress title
attribute tooltips in Firefox by setting the advanced configuration parameter browser.chrome.toolbar_tips
to false
.
需要注意的是,用户可以抑制title
通过设置高级配置参数在Firefox中的属性工具提示browser.chrome.toolbar_tips
到false
。
回答by Mottie
This jQuery tooltipscript will take the contents of the title and display them in a tooltip (including HTML formatting). Although, it doesn't fix the IE bug of showing the alt text, you could add some script to clear the alt attribute after the page is loaded; but as stated before, this is a bad idea as it will not allow document readers to work as designed.
这个jQuery 工具提示脚本将获取标题的内容并将它们显示在工具提示中(包括 HTML 格式)。虽然它没有修复IE显示alt文本的bug,但你可以添加一些脚本来在页面加载后清除alt属性;但如前所述,这是一个坏主意,因为它不允许文档阅读器按设计工作。
回答by J May
Gordon's answer was helpful but the reason the jQuery didn't work is because this
needs to be the object of a jQuery selector like so:
Gordon 的回答很有帮助,但 jQuery 不起作用的原因是因为this
需要成为 jQuery 选择器的对象,如下所示:
jQuery("img").each( function(){ jQuery(this).attr("title",jQuery(this).attr("alt") ) });
jQuery("img").each( function(){ jQuery(this).attr("title",jQuery(this).attr("alt") ) });
It was also missing the )
to close out the .each()
function.
它还缺少)
关闭.each()
功能。