如何将样式应用于“td”标签的“title”属性答案

【问题标题】：how to apply style to 'title' attribute of 'td' tag如何将样式应用于“td”标签的“title”属性
【发布时间】：2019-04-12 17:54:55
【问题描述】：

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

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

【问题讨论】：

Is it possible to style a title? (and with CSS or js?)的可能重复
如果您指的是悬停时出现的标准工具提示：不，您不能。不过，您可以使用 Javascript 编写自己的工具提示。

标签： html css

【解决方案1】：

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

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

为了确保这个链接不会失效，本文中建议的标题属性样式代码是：

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

【讨论】：

【解决方案2】：

不直接。

你可以这样做：

JavaScript 代码：see here
一个库：see here
使用 CSS see here 的一个小解决方法

【讨论】：

在下面查看我的答案，在 2015 年这是可能的。
非常感谢先生...这有帮助

【解决方案3】：

这不会为 TD 设置样式，但它是一种快速解决方法，可能是您正在寻找的：

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

【讨论】：

【解决方案4】：

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

然而，jQuery 提供了 javascript 替代方案，应该可以为您提供您所追求的解决方案：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

如果您需要特殊格式的工具提示，我建议您使用 onmouseover() 属性并自己生成弹出窗口。正如其他人指出的那样，如果您想在代码中添加对 jQuery 的支持，您可以使用 jQuery。有关比 jQuery 更轻量级的解决方案，请参阅SkinnyTip

【讨论】：