取以下代码：
<abbr title="World Health Organization">WHO</abbr>
我们可以为 abbr 标签的标题设置样式吗？那么我们可以使用标题来代替自定义工具提示吗？
【问题讨论】：
实际上，Alex Mcp 的回答是错误的。对于现代浏览器，使用 CSS 完全可以做到这一点。但是，可以使用带有 JavaScript 的旧浏览器的后备方案。
abbr {
position: relative;
}
abbr:hover::after {
position: absolute;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: yellow;
content: attr(title);
}
这将在 abbr 标记悬停时使用标题中的属性内容在 abbr 标记的右上角添加一个绝对定位的伪元素。
【讨论】：
content: attr(title); 不起作用。没有文字。
position: relative;的元素，它实际上确实有效
如果您的意思是为弹出的实际文本设置样式，不，您不能使用 CSS 设置样式；它是特定于浏览器的。基于 Javascript 的 tooltips 将是我处理它的方式，因为它允许对此行为进行更多控制。
【讨论】：
我一直在寻找类似的东西，并提出了以下替代方案（在 Mac 上的 Firefox、Safari 和 Chrome 上进行了测试，当我点击它时适用于 IE 7-10），基于this link：
HTML：
<abbr title="My Custom Abbreviation" name="">Abbreviation</abbr>
jQuery：
$('[title]').each( function() {
var mytitle = $(this);
mytitle.data('title',mytitle.attr('title')); // get title attribute value
mytitle.attr('name', mytitle.attr('title')); // add title attribute value to NAME attribute
mytitle.removeAttr('title'); // remove the title attribute, removing browser tooltip
});
CSS：
abbr {
position: relative;
}
abbr:hover::after {
position: absolute;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: yellow;
content: attr(name);
}
【讨论】：
width:max-content; 添加到伪元素。这将给出一行工具提示。我们也可以使用data-title 代替名称属性。
您可以设置缩短版本的显示方式，因此在本例中为“WHO”。但不是弹出框出现的方式，因为它是由浏览器/操作系统控制的。
您可以通过以编程方式将一些JQuery 内容应用到任何abbr 标记来绕过此限制 - 这将显示一个div，其内容将与调用的标记上的title 相同它。
【讨论】：