title: Display tooltip over fixed table header
body: <p>I am trying to get a tooltip to overlay within a jquery datatable with a fixed scrolling header. I've reproduced the issue in a jsfiddle here:</p>
  
  <p><a href="http://jsfiddle.net/75e4ssgv/4/" rel="nofollow">http://jsfiddle.net/75e4ssgv/4/</a></p>
  
  <p>The example html:</p>
  
  <pre><code>&lt;section&gt;
      &lt;h2&gt;I am content&lt;/h2&gt;
  &lt;/section&gt;
  &lt;section class="content"&gt;
          &lt;div&gt;&lt;span data-tooltip="other text i want to see"&gt;Other text&lt;/span&gt;&lt;/div&gt;
          &lt;div&gt;&lt;span data-tooltip="some text i want to see"&gt;Text&lt;/span&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Basically datatables is forcing the following css on to the container:</p>
  
  <pre><code>section.content {
      position: relative;
      background-color: white;
      width: 90%; 
      overflow: auto;
      border: 1px solid gray;
      height: 125px;
  }
  </code></pre>
  
  <p>This makes sense for making the content that appears within it scroll-able.</p>
  
  <p>However, I ripped a really simple css tooltip from another site</p>
  
  <pre><code>[data-tooltip] {
      position: relative;
      z-index: 10;
      cursor: help;
      color: orangered;
      text-decoration: none;
  }
  [data-tooltip]:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-top: 20px solid orangered;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      left: 0;
      bottom: 90%;
      display: none;
  }
  
  [data-tooltip]:after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 130%;
      right: -50%;
      background: orangered;
      padding: 5px 15px;
      color: black;
      border-radius: 10px;
      white-space: nowrap;
      display: none;
  }
  
  [data-tooltip]:hover:after {
      bottom: 100%;
  }
  
  [data-tooltip]:hover:before {
      bottom: 70%;
  }
  
  [data-tooltip]:hover:after, [data-tooltip]:hover:before {
      display:block;
  }
  </code></pre>
  
  <p>But no amount of tinkering with the css for it has so far yielded any satisfying results. Adding a higher <code>z-index</code> doesn't do anything, and if I add <code>position: absolute</code> to the <code>[data-tooltip]</code> declaration then it moves the text to weird places inside the table.</p>
  
  <p>So, is there any way to get this tooltip to appear outside of the container without adding <code>position: absolute</code> to it?</p>