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

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将是我处理它的方式,因为它允许更多地控制这种行为.