css伪类实现鼠标移入元素显示提示消息，不是element的自带提示功能

此乃小弟亲测，希望对各位大佬有用。

html部分：

    <!-- <a
      href="javascript: void(0)"
      data-tooltip="撒大声地所 &nbsp; 奥术大师多所"
    ><i class="iconfont">与官方积分打通 &#xe3432;</i></a>-->

css部分使用的是scss预处理器：
// 鼠标悬停提示
a {
text-decoration: none;
position: relative;
color: #536ee0;

  &[data-tooltip] {
    &::after {
      content: attr(data-tooltip);
      display: block;
      position: absolute;
      top: 10px;
      left: -200px;
      width: 280px;
      height: 136px;
      background: rgba(255, 255, 255, 1);
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      padding: 1em;
      margin-top: 1em;
      pointer-events: none;
      opacity: 0;
      transform: translateY(-10px);
      transition: all 0.5s;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      z-index: 1000;
    }

    &:hover {
      &::after {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}