CSS做一个tip
利用元素的::before和::after 来做一个纯css的tip。
.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;
}
<div class="box">
<span data-tip="Hi word!">
hellow word!
</span>
</div>
image.png
主要利用了伪元素的content中attr（）方法中传入自定义标签 data- 来完成。
需要在data- xxx 属性 中定义内容，可动态设置，这样每次hover时，就会出现提示信息。
