我尝试在 Bootstrap 表的标题中添加工具提示,但它的某些部分与另一列标题隐藏在一起,背景为白色,但我们的工具提示背景颜色不同。
.tooltipe {
position: relative;
display: block;
}
.tooltipe .tooltipetext {
font-family: "Muli", sans-serif !important;
display: none;
width: 15em !important;
max-height: 280px !important;
overflow-x: hidden;
overflow-y: auto;
color: #333333;
font-size: 0.80rem !important;
font-weight: 500 !important;
text-align: left;
line-height: 1rem;
background-color: whitesmoke;
border: 1px solid #0093d0;
border-radius: 4px;
padding: 2em;
white-space: pre-line;
position: absolute;
top:10;
z-index: 99999 !important;
}
.tooltipe:hover .tooltipetext {
display: block;
}
上面的代码是工具提示,其中 tooltipe
是其内容的类,它会在悬停时显示 tooltip
类。
{
dataField: 'aucr',
text: (<span>AUC ratio<i
className="fa fa-info-circle tooltipe ml-1"
aria-hidden="true"
>
<span className="tooltipetext">Area Under the Curve ratio</span>
</i>
</span>),
sort: true,
filter: aucrFilter,
headerStyle: {
minWidth: '160px',
}
},
这就是我添加带有工具提示的列标题的方式,我还使列标题具有粘性,以使标题在垂直滚动时冻结。