如何覆盖属性溢出：自定义工具提示隐藏？答案

【问题标题】：How to override property overflow:hidden for custom tooltip?如何覆盖属性溢出：自定义工具提示隐藏？
【发布时间】：2023-02-15 08:53:52
【问题描述】：

我正在尝试覆盖属性溢出：隐藏（父 td 元素）

对于我的工具提示，它应该显示在我的 td 元素下：

工具提示代码：

.tooltip1 {
  text-decoration: none;
  overflow: visible !important;
}

.tooltip1:hover {
  position: relative;
}

.tooltip1 span {
  display: none;
}

.tooltip1:hover span {
  border: #666 2px dotted;
  padding: 5px 20px 5px 5px;
  display: block;
  z-index: 100;
  background: #e3e3e3;
  left: 0px;
  margin: 15px;
  width: 150px;
  position: absolute;
  top: 15px;
  text-decoration: none;
  overflow: visible !important; //not working
}

<div class="tooltip1">Link
  <span>CSS tooltip showing up when your mouse over the link</span>
</div>

结果：

但我需要这样的东西（所有单元格上方的工具提示）：

我需要以某种方式禁用或覆盖 td 的属性溢出：隐藏对于 [.tooltip1:hover span]（我们的工具提示），所以我不能只更改父 td 元素的 if。

【问题讨论】：

粘贴您的td 元素结构内容。

标签： html css tooltip

【解决方案1】：

我猜工具提示是 td 的子项，如果是这样，您可以使用 has() 覆盖溢出属性：

td:has(.tooltip1:hover) {
  overflow: visible;
}

这是一个例子：

.td {
  width: 50px;
  overflow: hidden;
}

.td:has(.tooltip:hover) {
  overflow: visible;
}

<div class="td">
  <div class="tooltip">
  sdfksdfksdfksdfksdfsdfksdfk
  </div>
</div>

【讨论】：