CSS工具提示问题，工具提示重叠

Question

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

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

在我的例子中，我需要表中显示的数据的工具提示，所以超文本标记语言看起来像这样：

<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工具提示的基本原则？




Answer 1

好的，我一直在寻找其他方法来解决这个问题，而不仅仅是让CSS选择器正确地执行我所要做的事情，并且，在查看切换<代码>显示<代码>而不是<代码>不透明度<代码>时，找到了这个答案，这让我想到了设置/切换<代码>可见性<代码>以及<代码>不透明度<代码>。因此，为了显示工具提示，我设置：

opacity: 1;
visibility: visible;

为了隐藏它：

opacity: 0;
visibility: hidden;

这最终使我的工具提示能够正常工作，即使容器被上面隐藏的工具提示覆盖，因为如果它不可见，它就不能触发悬停（当它完全透明时可以触发）。这是叉形小提琴：

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