带有重叠工具提示的 CSS 工具提示问题答案

【问题标题】：CSS tooltip issue with overlapping tooltips带有重叠工具提示的 CSS 工具提示问题
【发布时间】：2016-03-19 10:24:49
【问题描述】：

我真的很喜欢this solution for CSS tooltips，并且我自己也使用了一段时间。但我刚刚遇到了一个以前从未遇到过的问题，多个工具提示的内容相互重叠，我不确定如何最好地解决它。

提到的解决方案是基于管理绝对定位的工具提示内容的opacity。干净、优雅，并且不需要 JavaScript。

在我的例子中，我需要表格中显示的数据的工具提示，所以 HTML 看起来像这样：

<td class="tooltipContainer">Tooltip container text
  <div class="tooltip">
    Contents of tooltip, can include HTML
  </div>
</td>

CSS 包括：

.tooltipContainer {
    position: relative;
}

.tooltip {
    position: absolute;
    [...other stuff...]
    opacity: 0;
    transition: opacity .8s;
}

.tooltipContainer:hover .tooltip {
    opacity: .95;
}

但是为了在鼠标离开工具提示容器后隐藏工具提示（否则你会出现奇怪的行为，工具提示显示而没有将鼠标悬停在容器上），你需要另一个规则来在鼠标悬停在它上面时隐藏工具提示，所以我使用了这个：

.tooltipContainer .tooltip:hover {
    opacity: 0;
}

问题是当您的工具提示在另一个工具提示下方时，即当您将鼠标悬停在容器上时其内容保持隐藏，因为您也将鼠标悬停在隐藏的上面的工具提示。

这是一个演示问题的 JSFiddle：http://jsfiddle.net/k1wbnbn4/

如您所见，顶行和底行按预期工作，但第二行的工具提示容器被第一行的工具提示覆盖，因此它们保持隐藏状态。

这是排除最后一条规则的另一个问题：http://jsfiddle.net/8ufzrt71/1/（只是为了说明为什么我认为需要它）。

我尝试过一些奇怪的事情，比如:not 规则让工具提示在悬停在容器上时始终显示，无论是否被另一个工具提示覆盖，但在悬停在工具提示内容上时总是隐藏。但我被卡住了，似乎无法让它按照我想要的方式工作。

如何让工具提示显示何时且仅在将鼠标悬停在其容器上而不偏离这些 CSS 工具提示的基本原则太远？

【问题讨论】：

标签： html css tooltip

【解决方案1】：

好的，所以我一直在寻找其他方法来解决这个问题，而不仅仅是让 CSS 选择器正确地执行我所追求的工作，并且在查看切换 display 而不是 opacity 时，遇到了 @987654321 @，这让我想到了设置/切换 visibility 和 opacity。所以为了显示工具提示，基本上我设置了：

opacity: 1;
visibility: visible;

并隐藏它：

opacity: 0;
visibility: hidden;

即使容器被上方的隐藏工具提示覆盖，这最终使我的工具提示能够正常运行，因为如果它不可见，则无法触发hover（它可以在完全触发时触发透明）。这是分叉的小提琴：

http://jsfiddle.net/4k90opzv/1/

【讨论】：