用CSS实现tip美化效果

需要在data- xxx 属性 中定义内容，可动态设置，这样每次hover时，就会出现提示信息。

HTML代码：

<div class="box">      <span data-tip="Hi word!">          hellow  word!      </span>  </div>

CSS代码：

.box {      margin-top: 50px;  }    .box span {      position: relative;      cursor: pointer;  }    .box span:hover::after {      content: "";      position: absolute;      top: -10px;      left: 30px;      width: 0;      height: 0;      border-top: 5px solid red;      border-left: 5px solid transparent;      border-right: 5px solid transparent;  }    .box span:hover::before {      content: attr(data-tip);      background-color: red;      color: #FFFFFF;      padding: 4px;      text-align: center;      position: absolute;      top: -39px;      left: 20px;      border-radius: 5px;  }