html - ABBR 工具提示 CSS 样式 : How to suppress original tooltip, 添加圆 Angular ?

标签 html css

<分区>

我使用 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 工具提示。我怎样才能抑制它?

这不能简单地用 similar question 的答案来解决。 .属性名称 title 必须保留并在运行时替换为 javascript。

最佳答案

由于您无法阻止/隐藏 title 属性在悬停时显示,只需使用不同的属性即可。 data-* 属性(例如 data-title)可以使用。只需更改标记和 content 值即可。

Example Here

<abbr data-title="As Soon As Possible">ASAP</abbr>
abbr:hover::after {
    content: attr(data-title);
    /* .. */
}

至于圆 Angular ,就用border-radius属性(property)。

关于html - ABBR 工具提示 CSS 样式 : How to suppress original tooltip, 添加圆 Angular ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25584678/

相关文章:

html - 倒梯形导航

javascript - HTML5、CSS 转换和 JS 触发器

python - 如何使用 Python 在 Google App Engine 中使用应用程序部署图像

html - 如何在 HTML 中复制缩进正确排列的 <ol><li> 元素符号列表?

javascript - 在 FTP 上实时缩小 CSS 和 JS

jquery - 显示一个 div 但隐藏所有其他 div 不起作用

html - 如何将 div 内容放入移动 View 的下拉列表中

jQuery - 将 div 宽度设置为其子项的总和

twitter-bootstrap - Bootstrap flex 列在 Firefox 中无法正常工作

javascript - 使用属性条件Jquery选择div