缩写标签的标题可以进行样式化吗？

Question

请看下面的代码：

<abbr title="World Health Organization">WHO</abbr>

我们可以给缩写标签(abbr tag)的title属性添加样式吗？这样我们就可以使用默认的tooltip而不是自定义的tooltip了吗？

- Joemon

---

在Firefox中，缩写标签（abbr tag）下有一个点线来表示有值得悬停的内容，但是在Chrome或IE中没有。但是它们可以通过样式进行设置，如下所示：http://html5doctor.com/the-abbr-element/ - Matthew Lock

Answer 1

实际上，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）上时，这将使用标题中的属性内容在缩写标签的右上方添加一个绝对定位的伪元素。

- DigiKev

---

我看到了黄色的背景，但是 content: attr(title); 没有起作用。没有文字显示。 - Pacerier

如果您给包含缩写的元素设置position: relative;，它实际上是有效的。 - user1381553

这只有我不行吗？即使使用@SoonDead的代码片段也不起作用。如果你把光标放在缩写上足够长的时间，你还会看到旧的工具提示也出现了。 - George

@George 是的，那是真的。你可以使用 JavaScript 来替换标签并模拟功能。 - vinczemarton

今天用 Yandex 尝试了这个方法，发现 @alex-mcp 的回答是正确的，尽管不同的投票结果，但这种方法实际上并没有为浏览器的弹出工具提示设置样式，而是模拟它。在我的情况下，使用这种方法我看到了两个工具提示：一个是伪造的，另一个是来自浏览器的。 - vhs

Answer 2

如果您希望样式化弹出的文本实际内容，不，您不能使用 CSS 样式化它；因为这是浏览器特定的。我会使用基于 JavaScript 的工具提示（tooltips）来处理它，因为这允许更多地控制此行为。

- Alex Mcp

---

https://inclusive-components.design/tooltips-toggletips/ 似乎走在更好的轨道上了... - vhs

Answer 3

我正在寻找类似的东西，找到了以下替代方案（在Mac上测试过Firefox、Safari和Chrome，在IE 7-10上点击时有效），基于这个链接：

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

- davewoodhall

---

在伪元素中添加 width:max-content;。这将提供一行工具提示。此外，我们可以使用 data-title 替代 name 属性。 - the Hutt

Answer 4

您可以为缩写版本设置样式，例如在这种情况下是“WHO”。但无法控制弹出框的外观，因为它由浏览器/操作系统控制。

您可以通过对任何abbr标签应用一些JQuery技术来解决此限制 - 这将显示一个div，其中的内容与调用它的标签上的title相同。

- Amadiere

---

不，<acronym>已经过时了。请使用<abbr>。 - Pacerier