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

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

html部分：

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);
          }
        }
      }
    }