记一个伪元素的骚操作

2019年10月25日 415 字大概 2 分钟

用伪元素实现气泡框

介绍

    在项目开发中本来自己负责的基础组件库里面的 Tooltip 组件没有达到预期的效果(有八阿哥)…
    后来想到其实可以用伪元素实现一个类似的气泡弹窗，但是又想到一个问题：我每个元素的气泡内容不一样这尼玛怎么填进去呢？
    于是乎，查文档、还真在文档里让我发现了一点有用的东西，通过 attr() CSS表达式和一个自定义数据属性 data-descr 创建一个纯CSS, 内容提示气泡如下：

相关属性：自定义属性 data-desrc 表达式 attr()

兼容性：还不错哦！！

各种链接如下：

相关代码

<h1>伪元素实现气泡提示</h1>
<p>
  <span class="tooltip" data-descr="伪元素">伪元素</span>
  <span class="tooltip" data-descr="实现">实现</span>
  <span class="tooltip" data-descr="气泡提示">气泡提示</span>
</p>

body {
  font-family: sans-serif;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  top: -24px;
  left: 0;
  min-width: 60px;
  max-width: 100%;
  height: 24px;
  padding: 0 8px;
  box-sizing: border-box;
  line-height: 24px;
  font-size: 10px;
  text-align: left;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: 4px;
  background: #202020;
}

.tooltip[data-descr]:hover::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 15px;
  padding: 1px;
  box-sizing: border-box;
  border: 5px solid #202020;
  width: 0;
  height: 0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  z-index: 99;
}