title: CSS tooltip issue with overlapping tooltips
body: <p>I really like <a href="https://stackoverflow.com/a/17391243/983430">this solution for CSS tooltips</a> 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.</p>
  
  <p>The solution mentioned is based on managing the <code>opacity</code> of absolutely positioned tooltip content. Clean, elegant, and doesn't need JavaScript.</p>
  
  <p>In my case, I need the tooltips for data shown in a table, so the <strong>HTML</strong> looks something like this:</p>
  
  <pre><code>&lt;td class="tooltipContainer"&gt;Tooltip container text
    &lt;div class="tooltip"&gt;
      Contents of tooltip, can include HTML
    &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>The <strong>CSS</strong> includes:</p>
  
  <pre><code>.tooltipContainer {
      position: relative;
  }
  
  .tooltip {
      position: absolute;
      [...other stuff...]
      opacity: 0;
      transition: opacity .8s;
  }
  
  .tooltipContainer:hover .tooltip {
      opacity: .95;
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>.tooltipContainer .tooltip:hover {
      opacity: 0;
  }
  </code></pre>
  
  <p>The problem is when you have a tooltip that is <em>below another tooltip</em>, i.e. its contents stay hidden when hovering over the container because you're <em>also</em> hovering over the hidden tooltip from above.</p>
  
  <p>Here's a <strong>JSFiddle</strong> demonstrating the problem: <a href="http://jsfiddle.net/k1wbnbn4/" rel="nofollow noreferrer">http://jsfiddle.net/k1wbnbn4/</a></p>
  
  <p>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.</p>
  
  <p>And here's another fiddle with that last rule excluded: <a href="http://jsfiddle.net/8ufzrt71/1/" rel="nofollow noreferrer">http://jsfiddle.net/8ufzrt71/1/</a> (just to demonstrate why I think it is needed).</p>
  
  <p>I've tried strange things, like a <code>:not</code> 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.</p>
  
  <p><strong>How do I get the tooltips to show <em>when and only when</em> hovering over their containers without straying too far from the basic principle for these CSS tooltips?</strong></p>