11

采取以下代码：

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

我们可以为 abbr 标签的标题设置样式吗？所以我们可以使用标题而不是自定义工具提示？

4

4 回答 4

27

实际上，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 标签的右上角添加一个绝对定位的伪元素。

于 2012-07-08T12:20:19.720 回答
8

如果您的意思是为弹出的实际文本设置样式，不，您不能使用 CSS 设置样式；它是特定于浏览器的。基于 Javascripttooltips将是我处理它的方式，因为它允许对此行为进行更多控制。

于 2009-11-05T18:50:08.910 回答
4

我正在寻找类似的东西，并提出了以下替代方案（在 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);
}
于 2013-09-15T22:19:32.690 回答
1

您可以设置缩短版本的样式，因此在本例中为“WHO”。但不是弹出框出现的方式，因为它是由浏览器/操作系统控制的。

您可以通过以编程方式将一些JQuery内容应用于任何abbr标记来解决此限制 - 这将显示 a div，其中的内容将与title调用它的标记上的 相同。

于 2009-11-05T18:51:17.660 回答