CSS tooltip issue with overlapping tooltips

Question

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.

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

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>

The CSS includes:

.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.

Here's a JSFiddle demonstrating the problem: 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.

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

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.

How do I get the tooltips to show when and only when hovering over their containers without straying too far from the basic principle for these CSS tooltips?

Answer 1

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;

And to hide it:

opacity: 0;
visibility: hidden;

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/