Question

是否可以为alt属性设置工具提示的样式？

我希望为html alt属性设置背景，字体颜色等样式。

有人可以帮我这个吗？

Answer 1

您可以使用新的HTML5自定义data-属性：Semantic Tooltips With Pure CSS3 and HTML5.

Answer 2

您无法设计默认工具提示（即样式化alt属性），但您可以使用Javascript，CSS和<div>或<span>标记来创建类似的内容：

http://shurie.com/coder/code_details.asp?codeid=4

或者这些CSS ONLY工具提示：

http://sixrevisions.com/css/css-only-tooltips/

Answer 3

你可以通过使用CSS和定位以及在javascript中显示和隐藏div来实现这一点。

这向您展示了一种方式。 http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/

Answer 4

纯CSS3和HTML5的语义工具提示

这种技术非常简单，我真的很惊讶之前没有人想过它，如果他们有这个链接，请给我发链接但是在谷歌采取了一些广泛的行动后我找不到任何东西。

目前，大多数人使用这样的东西来制作纯CSS工具提示：

<a href="#">Title <span>Tooltip</span></a>

（来自CSSGlobe的代码）

但这是我们HTML中另一个无关的元素，对于屏幕阅读器来说并没有多大意义，所以让我们尝试制作一个更加语义化的解决方案。

查看实际操作

解决方案在于title属性和CSS的content属性。我们可以使用该属性动态插入CSS文本。 HTML就像你喜欢的那样基本：

<p>I <span title="I mean really, really" class="tooltip">really</span> like pie.</p>

使用CSS的content属性，然后我们在span之后生成一些内容，如：

.tooltip:hover:after { content: attr(title); }

HTML Dog列出了我们可以对内容属性使用的内容。

当我们将鼠标悬停在跨度上时，我们的工具提示会显示出来。我们应该让它更加明显。

.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; }

展望未来

HTML5最终允许自定义属性，我们可以使它更加语义化。

<p>I <span data-tooltip="I mean really, really." class="tooltip">really</span> like pie.</p>

您可以在JavaScript Kit中阅读有关HTML5自定义属性的更多信息。

然后，您需要将CSS更改为：

.tooltip:hover:after { content: attr(data-tooltip); }

如何在html中设置alt工具提示的样式？

4 个答案: