title: CSS overflow: auto hiding tooltip
body: <p>I have a tooltip which gets hidden due to <code>overflow: auto</code> on the parent div.</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div id="wrapper"&gt;
          &lt;div class="item"&gt;&lt;span class="tooltip"&gt;Tooltip text&lt;/span&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;span class="tooltip"&gt;Tooltip text&lt;/span&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;span class="tooltip"&gt;Tooltip text&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  #wrapper {
      width: 400px;
      height: 100px;
      border: 1px solid #ccc;
      border-radius: 10px;
      overflow: auto;
      padding: 10px;
  }
  .item {
      width: 50px;
      height: 50px;
      border: 1px solid #ccc;
      border-radius: 10px;
      margin-top: 10px;
      position: relative;
  }
  .item:hover .tooltip {
      visibility: visible;
  }
  .item .tooltip {
      visibility: hidden;
      background-color: black;
      color: #fff;
      padding: 5px 0;
      border-radius: 6px;
      overflow: auto;
      z-index: 1;
      width: 100px;
      position: absolute;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/user1212/22836uoL/#" rel="nofollow">JSfiddle link</a></p>