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

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

html:

    
    
     Hover Me!!!
    

css:

body{        padding:100px;    }    span{        position:relative;        display:inline-block;    }    span:hover{        cursor:pointer;    }    span:hover:before{        content:attr(data-tooltip);        background:#d9444a;        color:#fff;        padding:.8em 1em;        position:absolute;        left:100%;        top:-70%;        margin-left:14px;        white-spack:pre;    }    span:hover:after{        content:" ";        position:absolute;        left:80%;        width:0;        height:0;        border-right:8px solid #d9444a;        border-top:8px solid transpatrnt;        border-bottom:8px solid transparent;    }

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

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

content: attr(data-tooltip);