CSS 工具提示重叠的问题

Question

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

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

在我的例子中，我需要 table 中显示的数据的工具提示，所以 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/

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

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

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

如何让工具提示显示 当且仅当 悬停在他们的容器上而不偏离这些 [=55= 的基本原则时] 工具提示？

Answer 1

好的，所以我一直在寻找其他方法来解决这个问题，而不仅仅是让 CSS 选择器正确地执行我想要的操作，并且考虑切换 display 而不是opacity，遇到了 this answer，这让我想到了 setting/toggling visibility 以及 opacity。所以为了显示工具提示，基本上我设置了：

opacity: 1;
visibility: visible;

并隐藏它：

opacity: 0;
visibility: hidden;

即使容器被上方的隐藏工具提示覆盖，这最终使我的工具提示按照它们应有的方式运行，因为如果它不可见，它就无法触发 hover（它可以触发当它完全透明时）。这是分叉的 fiddle:

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

CSS 工具提示重叠的问题

CSS tooltip issue with overlapping tooltips

html

css

tooltip