纯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