纯css实现tooltip提示（鼠标hover显示提示信息）

工作中常常会遇到这样的需求：鼠标hover显示提示信息，这个常见的需求利用css的after伪类即可实现。
举例效果如下：


实现起来也非常简单。主要用到css的after伪类，把要显示的内容放到 content属性里即可。
示例代码如下：
html部分：

        

            

                
姓名
                
城市
                
爱好
            
        
        

            

                
小美
                
北京
                
运动
            
            

                
小米
                
上海
                
声乐
            
        
    

css部分：

tbody tr td:last-child {
    position: relative;
}

tbody tr td:last-child:hover:after {
    position: absolute;
    left: 15px;
    top: 5px;
    padding: 5px;
    background-color: #0095ff;
    border-radius: 5px;
    color: #fff;
    /*这里显示的内容为表格中自定义的labelTooltip属性对应的值*/
    content: attr(labelTooltip);
    z-index: 2;
    width: 120px;
}

效果实现了，想要更美的样式自己调整一下就好。简单吧?