Html 表格单元格内的工具提示出现CSS z索引问题
我有一个动态数据表,每个列中都有一些自定义的验证工具提示。鼠标悬停时,将显示验证消息。但是靠近表边界的相邻消息会切断消息的完整视图。随附问题的屏幕截图 请在下面查找css代码:Html 表格单元格内的工具提示出现CSS z索引问题,html,css,tooltip,Html,Css,Tooltip,我有一个动态数据表,每个列中都有一些自定义的验证工具提示。鼠标悬停时,将显示验证消息。但是靠近表边界的相邻消息会切断消息的完整视图。随附问题的屏幕截图 请在下面查找css代码: a.tooltips div { display: none; width: 200px; position: absolute; color: #f87a7a; background: white; line-height: 19px; text-align:
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;
}
}
}
您没有附加代码,因此我看不出您是如何附加的,但我的想法是为工具提示提供
max width
属性100%
使用此属性,工具提示的宽度将永远不会超过表格单元格。我的表格是一个可滚动的表格,滚动条也会覆盖它靠近滚动条的消息。任何显示它的选项都可以像这样给出z索引。z索引也不适用于mez索引不适用于显示从可滚动元素中伸出的元素,您在工具提示中使用了什么?@ShmiliBreuer它自己的cusom工具提示,它的css也在问题上进行了更新。查看HTML也会很有用,但最终答案是一样的,可滚动元素中的任何内容,如果其子元素以某种方式被定位为位于z索引元素之外,都不会有助于在顶部显示它,因为它是隐藏的,因为它从父容器流出,这是唯一的解决方案(尽管可能有点复杂)将使用类似popperjs的库来日常定位工具提示。