Question

请使用以下代码：

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

我们可以设置abbr标签的标题吗？那么我们可以使用标题来代替自定义工具提示吗？

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标记悬停时，这将使用标题内的属性内容在abbr标记的右上角添加一个绝对定位的伪元素。

Answer 2

如果你的意思是风格弹出的实际文字，你不能用CSS来设置风格;它是特定于浏览器的。基于Javascript的tooltips将是我处理它的方式，因为它允许更多地控制此行为。

Answer 3

我正在寻找类似的东西，并提出了以下替代方案（在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);
}

Answer 4

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

您可以通过以编程方式将JQuery内容添加到任何abbr标记来解决此限制 - 这会显示div，其中的内容与{title的内容相同1}}在调用它的标记上。

是否可以设置abbr标签的标题？

4 个答案: