ABBR提示工具CSS样式：如何抑制原始提示工具并添加圆角？

Question

ABBR提示工具CSS样式：如何抑制原始提示工具并添加圆角？

3

我使用CSS来为abbr工具提示添加样式：

  abbr {
    position: relative;
  }
  abbr:hover::after {
    position: absolute;    
    width: 300px;
    bottom: 100%;
    left: 100%;
    display: block;
    padding: 1em;
    background: #ffffe1;
    content: attr(title);
  }

<abbr title="As Soon As Possible">ASAP</abbr>

然而，在使用新式样的 abbr 工具提示时，原始的传统工具提示也会显示。我该如何阻止它的显示？

这不能简单地通过类似问题的答案解决。必须保留属性名 title，并在运行时用JavaScript替换它。

- user1580348

相关：https://dev59.com/4WIj5IYBdhLWcg3w8JNZ - Josh Crozier

1

@Jukka K. Korpela，没有完全相同的问题。如果您认为此前已经有人问过同样的问题，请告诉我在哪里可以找到。这个问题不同之处在于它必须使用abbr标签中的title属性。 - user1580348

@user1580348，重复问题已经在开头链接了；它是https://dev59.com/4WIj5IYBdhLWcg3w8JNZ（请不要将无关的问题放在同一个问题中；圆角是一个无关的问题，在许多SO问题和答案中都有很好的覆盖）。 - Jukka K. Korpela

1

@Jukka K. Korpela，显然你没有看我的评论。这个问题是不同的，因为必须添加JavaScript来添加自定义属性（请参见解决方案）。我正在编辑问题以反映这一点。顺便说一句，有人删除了我编辑问题以反映上述内容的修改 - 那是你吗？ - user1580348

不，它并没有像顶部面板上所说的那样被回答。这是一个不同的问题。请阅读所有评论和已接受的解决方案！ - user1580348

@user1580348，你接受了一个与旧问题的已接受答案相同（除了措辞和类似细节）的答案。如果你有另一个问题，其中有一个特殊要求，即title属性必须出现在标记中，并应该用JavaScript替换为自定义属性，则这将是一个全新的问题，应该被标记为“javascript”。你应该先尝试自己解决问题并发布你的最佳努力；这不是一个特别困难的问题。 - Jukka K. Korpela

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

由于您无法防止/隐藏悬停时显示的标题属性，因此只需使用不同的属性即可。例如，data-title 这样的 data-* 属性将起作用。只需更改标记和 content 值即可。

示例在这里

<abbr data-title="As Soon As Possible">ASAP</abbr>

abbr:hover::after {
    content: attr(data-title);
    /* .. */
}

关于圆角处理，只需使用border-radius属性即可。