如何在 html 中设置 alt 工具提示的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5041589/
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
How to style the alt tooltip in html?
提问by priya
Is it possible to style the tooltip for the alt attribute?
是否可以为 alt 属性设置工具提示样式？
I wish to style the background, font color etc for the html altattribute.
我希望为 htmlalt属性设置背景、字体颜色等样式。
Can anyone help me with this please?
任何人都可以帮我解决这个问题吗？
回答by Kriem
You could use the new HTML5 custom data-attribute: Semantic Tooltips With Pure CSS3 and HTML5.
您可以使用新的 HTML5 自定义data-属性：纯 CSS3 和 HTML5 的语义工具提示。
回答by Myles Gray
You cannot design the default tooltip (i.e. styling the altattribute) but you can use Javascript, CSS and a <div>or <span>tag to create something similar:
您无法设计默认工具提示（即为alt属性设置样式），但您可以使用 Javascript、CSS 和 a<div>或<span>标签来创建类似的内容：
http://shurie.com/coder/code_details.asp?codeid=4
http://shurie.com/coder/code_details.asp?codeid=4
Or these CSS ONLY tooltips:
或者这些仅 CSS 工具提示：
回答by Muhammad Tahir
Semantic Tooltips With Pure CSS3 and HTML5
使用纯 CSS3 和 HTML5 的语义工具提示
This technique is so simple that I'm really surprised nobody has come up with it before, please shoot me link if they have but I couldn't find anything after some extensive Google action.
这项技术非常简单，以至于我真的很惊讶之前没有人提出过它，如果他们有的话，请给我发链接，但经过一些广泛的谷歌行动后我找不到任何东西。
Currently, most people use something like this to produce a pure CSS tooltip:
目前，大多数人使用这样的方法来生成纯 CSS 工具提示：
<a href="#">Title <span>Tooltip</span></a>
(Code from CSSGlobe)
（代码来自 CSSGlobe）
But this is another extraneous element in our HTML and won't really make much sense to screenreaders so let's try to produce a more semantic solution.
但这是我们 HTML 中的另一个无关元素，对屏幕阅读器没有多大意义，所以让我们尝试产生一个更具语义的解决方案。
See it in action
看到它在行动
The solution lies in the title attribute and CSS's content property. We can use the attribute to dynamically insert the text with CSS. The HTML is as basic as you like:
解决方案在于 title 属性和 CSS 的 content 属性。我们可以使用该属性来动态插入带有 CSS 的文本。HTML 随心所欲：
<p>I <span title="I mean really, really" class="tooltip">really</span> like pie.</p>
Using CSS's content property, we then produce some content after the span like so:
使用 CSS 的 content 属性，我们在 span 之后生成一些内容，如下所示：
.tooltip:hover:after { content: attr(title); }
HTML Dog has a list of what we can use with the content property.
HTML Dog 有一个我们可以使用 content 属性的列表。
Our tooltip will now show up when we hover over the span. We should probably make it a bit more visible.
当我们将鼠标悬停在跨度上时，我们的工具提示现在将显示。我们可能应该让它更显眼。
.tooltip { border-bottom: 1px dotted #333; position: relative; cursor: pointer; }
.tooltip:hover:after { content: attr(title); position: absolute; white-space: nowrap; background: rgba(0, 0, 0, 0.85); padding: 3px 7px; color: #FFF; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-left: 7px; margin-top: -3px; }
Looking to the Future
展望未来
With HTML5 finally allowing custom attributes, we can make this even more semantic.
随着 HTML5 最终允许自定义属性，我们可以使其更具语义。
<p>I <span data-tooltip="I mean really, really." class="tooltip">really</span> like pie.</p>
You can read more about HTML5 custom attributes at JavaScript Kit.
您可以在 JavaScript Kit 中阅读有关 HTML5 自定义属性的更多信息。
You will then need to change the CSS to:
然后，您需要将 CSS 更改为：
.tooltip:hover:after { content: attr(data-tooltip); }
回答by madmik3
You can do this by using CSS and positioning and showing and hiding a div in javascript.
您可以通过使用 CSS 和定位以及在 javascript 中显示和隐藏 div 来做到这一点。
this shows you one way. http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/
这向您展示了一种方式。 http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/
