如何将样式应用于'td'标签的'title'属性

Question

我有以下代码，并希望自定义'title'属性的样式。 有没有办法做到这一点。 提前致谢。

<td title="Sample Title">test</td>

Answer 1

不是直接的。

你可以这样做：

• JavaScript代码： 请看这里

• 图书馆： 见这里

• CSS的一点解决方法请看这里

Answer 2

多年前这可能不是这样 - 但现在可以设置Title属性的样式，请参见此处 。 这应该适用于IE7 +，Safari 3 +，Firefox 2.0+。

可能需要一些自定义样式和定位来适应您自己的设计。

为了确保此链接不会消失，本文中用于设置title属性样式的建议代码是：

<div title="Tooltip text for first div"></div> <div title="Tooltip text for second div"></div>

div:before{ content:attr(title); display:none; }

div:hover::before{ width:200px; display:block; background:yellow; border:1px solid black; padding:8px; margin:25px 0 0 10px; }

div:hover{ z-index:10; position:relative; }

Answer 3

简而言之，您无法设置title属性的样式。 它取决于浏览器在显示时如何呈现标题。

但是，jQuery提供了javascript替代方案，它们可以为您提供以下解决方案：

http://jquery.bassistance.de/tooltip/demo/

Answer 4

这不会影响TD，但它是一个快速的解决方案，可能是你正在寻找的：

<td><a title="Sample Title">test</a></td>

Answer 5

不同。不同的浏览器以不同的方式显示标题工具提示，并且无法使用css对其进行样式设置。 如果必须设置样式，则需要寻找替代方法，例如使用jQuery显示自定义工具提示 。

Answer 6

浏览器支持“title”属性，通常作为工具提示。 用于格式化弹出窗口的CSS没有标准方法。

我建议如果你需要一个特殊格式的工具提示，你可以使用onmouseover（）属性并自己生成弹出窗口。 正如其他人所指出的，如果你想为你的代码添加对它的支持，你可以使用jQuery。 对于比jQuery更轻量级的解决方案，请参阅SkinnyTip