[英]CSS z-index issue when tooltip inside of table cell
我有一個動態的 data.table,每列內都有一些自定義驗證工具提示。 在鼠標 hover 上,將顯示驗證消息。 但是靠近表格邊界的相鄰消息會切斷消息的完整視圖。 隨附問題的屏幕截圖。
找到下面的 css 代碼:
a.tooltips div {
display: none;
width: 200px;
position: absolute;
color: #f87a7a;
background: white;
line-height: 19px;
text-align: center;
visibility: visible;
border-radius: 4px;
box-shadow: 0px 0px 0px #f87a7a;
border: solid 1px #f87a7a;
/* max-width: 15%; */
padding: 3px;
font-size: 11px;
z-index: 100;
top: 40px;
left: 0;
text-align: center;
word-break: break-all;
}
a.tooltips div:after {
content: '';
position: absolute;
left: 45%;
width: 189px;
margin-top: -15px;
width: 0;
height: 0;
border-left: 8px solid #f87a7a;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
transform: rotate(-90deg);
}
.insight-list-items {
.smo-normal-table
.smo-table-normal
.smo-table-tbody
> tr
> td:hover
{
z-index: 199999999999999999999999;
a.tooltips div {
position: absolute;
display: block;
z-index: 199999999999999999999999;
}
}
}
你沒有附上代碼,所以我看不到你是怎么做到的,但我的想法是給工具提示一個100%
的max-width
屬性。
使用此屬性,工具提示將永遠不會比表格單元格寬。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.