title: Making a CSS Hover-Tooltip Extend Outside of it's Parent's Bounds
body: <p>I have a requirement for an icon with a styled hover-over tooltip within the <code>&lt;thead&gt;</code> of a <code>table</code>. Basically, my hover-over tooltip appears as it should when the user hovers over the icon, however, the bottom half of the tooltip text goes under the <code>&lt;tbody&gt;</code> data. </p>
  
  <p>I'm fairly sure my issue is purely <code>css</code> based, and doesn't have anything to do with the fact that the table is styled by <code>DataTables</code>. The <code>z-index</code> does not appear to be the issue, as I have tried playing with that with no success. I think it's that the tooltip does not want to be able to show outside of it's <code>&lt;thead&gt;</code> parent since it starts in the <code>&lt;thead&gt;</code>.</p>
  
  <p>I have created a <strong>TryIt Editor</strong> showing the problem, <a href="https://www.w3schools.com/code/tryit.asp?filename=G369RB1CH5HD" rel="nofollow noreferrer">here</a>.</p>
  
  <p>And, since I don't know how long those <strong>TryIt Editor</strong> URLs last (I assume not forever), I am also including some example code, here:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Hover Over Issue Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"&gt;
    &lt;script&gt;
      $(document).ready(function() {
          $('#styledtable').DataTable({
              "destroy" : true,
              "scrollY" : 300,
              "scrollCollapse" : true,
              "paging" : true,
              "autoWidth" : true,
              "ordering" : true,
              "searching" : false,
              "order" : [ [ 0, 'asc' ] ],
              "pageLength" : 20,
              "lengthChange" : false,
              "pagingType" : "full_numbers",
              "dom" : '&lt;"top"ip&gt;rt&lt;"bottom"fl&gt;&lt;"clear"&gt;'
          });
      });
     &lt;/script&gt;
  
     &lt;style&gt;
        .mySpecialTooltip {
              position: relative;
              display: inline-block;
              float: right; 
              top: 0px; 
              right: 0px; 
              cursor: pointer;
        }
  
        .mySpecialTooltip span {
            visibility: hidden;
            width: 200px;
            background-color: black;
            color: white;
            text-align: left;
            padding: 5px 5px;
            border-radius: 6px;
            white-space: normal;
            font-weight: normal;
            font-size: 12px;
            position: absolute;
            z-index: 2;
            top: 100%;
            left: 50%;
            margin-left: -200px;
        }
  
        .mySpecialTooltip:hover span {
            visibility: visible;
        }
     &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;h2&gt;Hover Over Issue Example&lt;/h2&gt;
    &lt;p&gt;I need the hover overs on the top right column icons to show up entirely. Hover over the &lt;b&gt;small orange exclamation mark icon&lt;/b&gt; which looks like &lt;img src="https://cdn3.iconfinder.com/data/icons/tiny-icons/warning.png"/&gt; above the &lt;b&gt;email&lt;/b&gt; header for an example of the problem.&lt;/p&gt;            
    &lt;table class="table" id="styledtable"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th style="border: 0px; !important"&gt;&lt;/th&gt;
          &lt;th style="border: 0px; !important"&gt;&lt;/th&gt;
          &lt;th style="border: 0px; !important"&gt;
            &lt;div class="mySpecialTooltip"&gt;
              &lt;img src="https://cdn3.iconfinder.com/data/icons/tiny-icons/warning.png" style="cursor: pointer;"/&gt;
                  &lt;span&gt;
                      This is some hover over text. It can be long - long enough that it needs to be able to 
                      float over the data in the top rops of the table. So I will just keep typing to ensure
                      that this box is very long. This is probably long enough.
                  &lt;/span&gt;
            &lt;/div&gt;
          &lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Firstname&lt;/th&gt;
          &lt;th&gt;Lastname&lt;/th&gt;
          &lt;th&gt;Email&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;John&lt;/td&gt;
          &lt;td&gt;Doe&lt;/td&gt;
          &lt;td&gt;john@example.com&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Mary&lt;/td&gt;
          &lt;td&gt;Moe&lt;/td&gt;
          &lt;td&gt;mary@example.com&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;July&lt;/td&gt;
          &lt;td&gt;Dooley&lt;/td&gt;
          &lt;td&gt;july@example.com&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>