Question

我非常喜欢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工具提示的基本原则的情况下，显示的工具提示？

Answer 1

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

opacity

隐藏它：

opacity: 1;
visibility: visible;

这最终得到了我的工具提示，即使容器被上面的隐藏工具提示覆盖，也应该表现得如此，因为如果它不可见，则无法触发opacity: 0; visibility: hidden;（当它完全透明时它可以触发它。这是分叉的小提琴：

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

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

1 个答案: