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

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


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

<table border="1">
        <thead>
            <tr>
                <td>姓名</td>
                <td>城市</td>
                <td>爱好</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小美</td>
                <td>北京</td>
                <td labelTooltip="羽毛球 | 乒乓球">运动</td>
            </tr>
            <tr>
                <td>小米</td>
                <td>上海</td>
                <td labelTooltip="钢琴 | 二胡">声乐</td>
            </tr>
        </tbody>
    </table>

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;
}

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