重叠工具提示的CSS工具提示问题 [英] CSS tooltip issue with overlapping tooltips

问题描述

我真的很喜欢这个CSS工具提示的解决方案，并且已经使用了一段时间的版本。但我刚刚遇到一个问题，我以前没有遇到过多个工具提示的内容相互重叠，我不知道如何最好地解决它。

I really like this solution for CSS tooltips and have used a version of it myself for a while. But I just came across an issue with it that I hadn't encountered before with the content of multiple tooltips overlapping each other and I'm not sure how best to solve it.

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

The solution mentioned is based on managing the opacity of absolutely positioned tooltip content. Clean, elegant, and doesn't need JavaScript.

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

In my case, I need the tooltips for data shown in a table, so the HTML looks something like this:

<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;
}

但是为了在鼠标离开工具提示容器时隐藏工具提示你会得到奇怪的行为与工具提示显示，而不是悬停在容器上），你需要另一个规则来隐藏工具提示时悬停它，所以我使用这：

But in order to hide the tooltip once the mouse leaves the tooltip container (otherwise you get strange behaviour with tooltips showing up without hovering over the container), you need another rule to hide the tooltip when hovering over it, so I used this:

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

问题是当你有一个工具提示，即当其悬停在容器上时，其内容仍保持隐藏状态。

The problem is when you have a tooltip that is below another tooltip, i.e. its contents stay hidden when hovering over the container because you're also hovering over the hidden tooltip from above.

以下是 JSFiddle 演示问题： http://jsfiddle.net/k1wbnbn4/

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

As you can see, the top and bottom rows work as expected, but the tooltip containers for the second row are covered by the tooltips for the first row, so they stay hidden.

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

And here's another fiddle with that last rule excluded: http://jsfiddle.net/8ufzrt71/1/ (just to demonstrate why I think it is needed).

我尝试过奇怪的事情，像一个：not 规则，以获得工具提示总是显示时悬停在容器上，无论是否覆盖的另一个工具提示，但总是在悬停在工具提示内容时隐藏。

I've tried strange things, like a :not rule to get the tooltips to always show when hovering over the container, whether covered by another tooltip or not, but always hide when hovering over the tooltip contents. But I'm stuck and can't seem to get it to work the way I want.

我如何获得工具提示显示当

推荐答案

只有当将鼠标悬停在其容器上而不偏离这些CSS工具提示的基本原则

好的，所以我一直在寻找其他方法来解决这个问题，而不仅仅是让CSS选择器做我所做的事情，并且看到toggling display 而不是 opacity ，遇到了这个答案，它让我设置/切换 visibility 以及 opacity 的想法。为了显示工具提示，本质上我设置：

Ok, so I've been looking for other ways to tackle this than just getting the CSS selectors right to do what I'm after, and, looking at toggling display instead of opacity, came across this answer, which got me onto the idea of setting/toggling visibility as well as opacity. So to show the tooltip, essentially I set:

opacity: 1;
visibility: visible;

并隐藏它：

opacity: 0;
visibility: hidden;

这终于得到我的工具提示的行为，因为他们应该甚至当一个容器被隐藏的工具提示覆盖因为如果它不可见，它不能触发 hover （当它完全透明时它可以触发）。这是分叉的小提琴：

This finally gets my tooltips to behave as they should even when a container is covered by a hidden tooltip from above, because if it's not visible, it can't trigger the hover (which it can trigger when it's just completely transparent). Here's the forked fiddle:

http：// jsfiddle。 net / 4k90opzv / 1 /

这篇关于重叠工具提示的CSS工具提示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！