纯css实现tooltip文字浮框

在平时开发中会遇到展示不全的信息或者一个图标，鼠标移入后展示出更详细的内容浮框需求，现在使用的组件库都有这个功能组件，直接引入使用即可。但是有时候项目没有引入组件库，或者无法使用组件的时候，自己可以使用纯css来实现自己的tooltip浮框。

一、全部使用伪类实现

思路

1、 在文字显示的标签内增加浮框的内容
2、 使用伪类：：before设置浮框
3、 使用伪类：：after设置三角形（实现三角形设置元素宽高为0，三个边框颜色透明）
4、 使用定位设置浮框和三角形距离文字标签的距离
5、 给元素设置不同属性，使用属性选择器设置浮框出现在文字元素的方向位置
6、 使用content: attr(元素属性名); 获取属性值

代码实现

首先是元素代码

<div id="container" content="后水水水水">
      <div style="marginTop: 100px;" class="my-show-tooltip" content="提示出提提示\A出现UK复\r\n合式开发哈萨克的节哀顺变道提示出现UK复合式开发哈萨克的节哀顺变道提示出现UK复合式开发哈萨克的节哀顺变道示出现UK复合式开发哈萨克的节哀顺变道现在左侧" position="top">我是在上面的</div>
      <br>
      <div class="my-show-tooltip" content="`提示出现UK复合式开发哈萨克的节哀顺\A变道\r\n
      济阿斗富士康后方可是否开\r\n始放好看富士康回复肯定
      是大富豪收款方在上方`" position="top">
      我是在上面的</div>
      <br>
      <div class="my-show-tooltip" content="我是在右面的我是在右面的\A我是在右面的我是在右面的我是在右面的" position="right">我是在右面的</div>
      <br>
      <div class="my-show-tooltip" content="我是在下面的我是在下面的我是在下面的我是在下面的" position="bottom">我是在下面的</div>
      <br>
      <div class="my-show-tooltip" content="我是在左面的我是在左面的我是在左面的" position="left">我是在左面的</div>
</div>

接下来是样式代码

//全部使用伪类实现toolip
.my-show-tooltip {
  display: inline-block;
  position: relative;
}

.my-show-tooltip:hover::before {
  display: block;
}

.my-show-tooltip::before {
  display: none;
  content: attr(content);
  white-space: pre;
  text-align: left;
  position: absolute;
  color: #fff;
  padding: 8px 16px;
  border-radius: 2px;
  z-index: 100;
  background-color: #000;
}

.my-show-tooltip[position="top"]::before {
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, .4);
}

.my-show-tooltip[position="right"]::before {
  left: calc(100% + 10px);
  top: 50%;
  transform: translate(0, -50%);
  box-shadow: -5px 0 10px -2px rgba(0, 0, 0, .4);
}

.my-show-tooltip[position="bottom"]::before {
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 -5px 10px -2px rgba(0, 0, 0, .4);
}

.my-show-tooltip[position="left"]::before {
  right: calc(100% + 10px);
  top: 50%;
  transform: translate(0, -50%);
  box-shadow: 5px 0 10px -2px rgba(0, 0, 0, .4);
}

.my-show-tooltip::after {
  display: none;
  content: '';
  position: absolute;
  z-index: 100;
  width: 0;
  height: 0;
}
.my-show-tooltip:hover::after {
  display: block;
}

.my-show-tooltip[position="top"]::after {
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translate(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
}

.my-show-tooltip[position="right"]::after {
  left: calc(100% + 5px);
  top: 50%;
  transform: translate(0, -50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #000;
}

.my-show-tooltip[position="bottom"]::after {
  top: calc(100% + 5px);
  left: 50%;
  transform: translate(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #000;
}

.my-show-tooltip[position="left"]::after {
  right: calc(100% + 5px);
  top: 50%;
  transform: translate(0, -50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #000;
}

最终效果

上述方法在使用的过程中对于简单的文字提示完全可以实现，但是遇到提示内容比较复杂的时候就很乏力，比如换行和设置各种不同的样式时，另外上述方式可能有些浏览器不兼容。所以我们采用了第二种方式来实现。

二、新添加元素标签实现

思路

1、 在文字元素内添加一个浮框的标签
2、 浮框使用定位设置展示在文字元素的方向和位置
3、 使用浮框标签伪类设置三角形（实现三角形设置元素宽高为0，三个边框颜色透明）
4、 给元素设置不同属性，使用属性选择器设置浮框出现在文字元素的方向位置参考第一种方法（下面方法只展示了在上方的浮框，所以就没设置标签属性）

首先是元素代码

<div class="textWrap" style="marginTop:100px;">
        <div class="show-text">
          <div class="my-toolip">我觉的我是想展示的东西我觉的我是想展示的东西我觉的我是<br>想展示的东西我觉的我是想展示的东西我觉的我是想展示的东西</div>
          慢慢滑过
        </div>
      </div>

接下来是样式代码

// 使用css添加元素实现
.show-text {
  position: relative;
}

.show-text:hover .my-toolip {
  display: block;
}

.my-toolip {
  display: none;
  white-space: pre;
  text-align: left;
  position: absolute;
  color: #fff;
  font-family: PingFangSC;
  padding: 8px 16px;
  border-radius: 2px;
  z-index: 100;
  background-color: #000;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%);
  margin-bottom: 10px;
}

.my-toolip::after {
  display: none;
  content: '';
  position: absolute;
  z-index: 100;
  bottom: -5px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
}
.show-text:hover .my-toolip::after {
  display: block;
}

最终效果

上面因为只用到了在上方的效果所以其他方向的就没有写，其他方向和上方的实现一样，只需要修改定位的位置即可，这种方式可以轻松实现更复杂的浮框内容,扩展性更好。