css 使用content:attr()实现悬浮提示

还是上波效果图先：

关键属性、选择器和函数 content , data-  ,  :before , :after , attr(),：

    

:before , :after 向指定元素插入内容，使用content属性指定插入的内容。

content一般和伪元素 :before和 :after搭配使用,一起生成内容。attr()函数：可以获取该元素的属性，一般和data- * 自定义属性配合使用。data-*：data-* 属性用于存储私有页面后应用的自定义数据。data-* 属性可以在所有的 HTML 元素中嵌入数据。自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。html结构：

<div data-content="我是一个悬浮提示框" class="content">鼠标滑过我</div>

css样式：

.content{
text-align: center;
height: 50px;
line-height: 50px;
width: 100px;
margin: 100px auto;
padding: 5px;
background-color: rgb(196,0,0);
color: white;
font-size: 18px;
position: relative;
}
.content:hover{
cursor: pointer;
}
.content:hover:before{
content: attr(data-content); /*动态获取数据*/
position: absolute;
left: 100%;
width:200px;
height: 50px;
font-size: 18px;
line-height: 50px;
background-color: rgb(0,196,0);
margin-left: 12px;
}
.content:hover:after{ /*实现小三角*/
content: "";
position: absolute;
left: 100%;
top: 50%;
margin: -10px 0 0 -8px;
width: 0;
height: 0;
border-width: 10px;
border-color: transparent rgb(0,196,0) transparent transparent;
border-style: solid;
}

参考资料：css中content和attr()的用法