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（）方法中傳入自定義標(biāo)簽 data- 來完成。
需要在data- xxx 屬性 中定義內(nèi)容官地，可動態(tài)設(shè)置怒详，這樣每次hover時炉媒，就會出現(xiàn)提示信息。
