html - 表格单元格内的工具提示时出现 CSS z-index 问题
问题描述
我有一个动态数据表,每列内都有一些自定义验证工具提示。鼠标悬停时将显示验证消息。但是靠近表格边框的相邻消息会切断消息的完整视图。附上问题的截图。
找到下面的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;
}
}
}
解决方案
你没有附加代码,所以我看不到你是怎么做到的,但我的想法是给工具提示一个max-width
.100%
使用此属性,工具提示将永远不会比表格单元格宽。
推荐阅读
- r - 根据 R 中的现有列创建多个百分比列
- java - 读取和更新本地存储变量的正确方法
- node.js - 如何使用nodejs在猫鼬中进行多级填充
- kotlin - Quarkus AMQP 在请求业务逻辑后将消息发送到队列
- reactjs - 我可以从 bash 运行多个 React 程序并在 Web 上查看它们吗?
- excel - 如果文件夹不为空,如何创建错误
- r - 有没有办法在代码运行时找到 R 中变量的大小?
- laravel - 如何从我的数据库中设置背景图像?
- javascript - JavaScript GetFullYear 函数错误
- angular - 检索 Firestore 子集合