![提示框样式](https://i-blog.csdnimg.cn/blog_migrate/ba07310c7df8ce958d5f659cff517161.png)
<span class="tool-tips">
<span class="tool-tips-text">提示内容</span>
</span>
// 提示框
.tool-tips {
background: url('../../../../../assets/media/app/img/icons/icon_tips@2x.png') no-repeat;
background-size: contain;
}
.tool-tips {
position: relative;
display: inline-block;
width: 12px;
height: 12px;
top: 2px;
left: 4px;
.tool-tips-text {
visibility: hidden;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 12px 1px rgba(29, 42, 68, 0.12);
font-weight: normal;
color: #5d626b !important;
text-align: left;
padding: 12px;
border-radius: 6px;
bottom: 100%;
margin-bottom: 10px;
position: absolute;
z-index: 102;
width: 240px;
bottom: 100%;
left: 50%;
margin-left: -120px;
font-size: 14px;
}
}
.tool-tips:hover .tool-tips-text {
visibility: visible;
}
.tool-tips .tool-tips-text::after {
content: " ";
position: absolute;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
top: 100%;
border-color: #fff transparent transparent transparent;
}