纯css实现鼠标悬停文字的汽泡提示

1 固定样式

<!--标签上加title属性--> <div class="tooltip" title="提示内容"></div>

2 伪类实现

<!--标签上自定义属性--> <td labelTooltip="提示内容">声乐</td> td { position: relative; } td:after { position: absolute; left: 50%; transform: translate(-50%); top: -15px; padding: 2px 10px; box-shadow: 0 2px 9px #999; background-color: #FFF; border-radius: 4px; color: #666; /*这里显示的内容为表格中自定义的labelTooltip属性对应的值*/ content: attr(labelTooltip); z-index: 2; line-height: 20px; height: 20px; }

image.png