我真的很喜欢这种CSS工具提示的解决方案，并且自己使用了一段时间。但是我遇到了一个以前从未遇到过的问题，多个工具提示的内容相互重叠，我不确定如何最好地解决它。
提到的解决方案基于管理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工具提示的基本原理呢？
好的，所以我一直在寻找其他方法来解决此问题，而不仅仅是让CSS选择器正确地执行我要执行的操作，然后以切换display而不是的方式opacity遇到了这个答案，这使我想到了设置/visibility以及opacity。因此，为了显示工具提示，基本上我设置了：
opacity: 1;
visibility: visible;
并隐藏它：
opacity: 0;
visibility: hidden;
即使容器从上方被隐藏的工具提示覆盖，这最终也使我的工具提示能够发挥应有的作用，因为如果看不见容器，它就无法触发hover（当容器完全透明时可以触发）。这是分叉的小提琴：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句