content: attr(data-content);鼠标触发显示悬浮提示 – CSS – 前端，css3 金属

css 设置字体，css checkbox变大，css img有边线，禁止js改变css样式，css样式溢出影藏，css 表格里面的链接，css3 金属 content: attr(data-content);鼠标触发显示悬浮提示 - CSS - 前端，css3 金属

《CSS 纯CSS提示文字，问号弹出提示文字》纯CSS集成小组件！

csscontent的attr实现鼠标悬浮显示悬浮提示，

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

css 设置字体，css checkbox变大，css img有边线，禁止js改变css样式，css样式溢出影藏，css 表格里面的链接，css3 金属 鼠标触显示悬浮提示.gif

<div>
<spandata-tooltip="鼠标触发显示悬浮提示文字">HoverMe!!!</span>
</div>
<style>
body{padding:100px;}
span{position:relative;display:inline-block}
span:hover{cursor:pointer;}
span:hover:before{
content:attr(data-tooltip);
background-color:#f35;
color:#fff;
padding:.8em1em;
position:absolute;
left:100%;
top:-70%;
margin-left:14px;
white-space:pre;
}
span:hover:after{
content:"";
position:absolute;
left:108%;
width:0;
height:0;
border-right:8pxsolid#000;
border-top:8pxsolidtranspartent;
border-bottom:8pxsolidtransparteng;
}
</style>

data-为自定义属性，如上自定义提示 data-tooltip ="hello world",

配合 before ，after使用 content的attr调用自定义提示，

content: attr(data-tooltip);