给a-table的表头元素添加属性data-title,使鼠标滑入显示注释:
const dom=document.querySelector('.ant-table-thead th');
dom.setAttribute('data-title', '这是显示的注释')
自定义显示注释的样式:
[data-title] {
&:hover {
position: relative;
&:after {
content: attr(data-title);
position: absolute;
top: 20px;
left: 10px;
color: #666;
font-size: 10px;
border: 1px solid #ddd;
background-color: #fff;
z-index: 20;
line-height: 1.5;
font-style: normal;
white-space: nowrap;
padding: 0 5px;
}
}
}
效果: