title: Tool tip cut off by table edges
body: <p>I am trying to use a tooltip in a datatable, but whenever it comes up, It gets cut off by the edges of the table.  I have tried all different kinds of css but nothing has worked out.  Is there some css or javascript i can implement to get this to work?</p>
  
  <p>Here is the tooltip code in the location index:</p>
  
  <pre><code>&lt;div class="tooltip-item"&gt;
                  &lt;div class="actions"&gt;
                    &lt;%= link_to "#{location.name}", location %&gt;
                  &lt;/div&gt;
                  &lt;div class="tooltip"&gt;
                    &lt;div class="tooltip-content"&gt;
                      LR System ID: &lt;%= "#{@post.lr_system_id}" %&gt;
                      &lt;br&gt;
                      LR Version:   &lt;%= "#{@post.lr_version}" %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>locations.scss:</p>
  
  <pre><code>.tooltip-item {
    text-align: center;
    margin-top: 10px;
    }
  
  intro {
    @include outer-container;
    p { @include span-columns(3); }
    //article { @include span-columns(9); }
  }
  
  #content {
   p {
    font-family: Lato, sans-serif;
     }
   }
  
  table {
  
    a:link{color:#000;}
    a:visited{color:#000;}
    a:hover{color:#959A8B;}
  
    th {
      width: 9%; // 100% / 11 (num columns) ≈ 9%
    }
    td {
      width: 9%;
    }
  
    border-width: medium;
    border-style: solid;
    border-color: $bar-border-color
  }
  
  table {font-size: 14px;}
  </code></pre>
  
  <p>tooltip.scss:</p>
  
  <pre><code>.tooltip-item {
    display: inline-block;
    position: relative;
    text-align: center;
  
    &amp;:focus .tooltip,
    &amp;:hover .tooltip {
      opacity: 1;
      visibility: visible;
  }
  
  .tooltip {
      @include position(absolute, null 0 3em);
      @include transition(all 0.2s ease-in-out);
      background-color: #f8f8f8;
      margin-left: -3.7em;
      opacity: 0;
      text-align: center;
      visibility: hidden;
      width: 12em;
  
      border-radius: 15px;
      border-bottom-width: thin;
      border-bottom-style: solid;
      border-bottom-color: #D7D7D7;
      border-right-width: thin;
      border-right-style: solid;
      border-right-color: #E7E7E7;
  
    }
  
  .tooltip::after {
      @include position(absolute, null 0 null);
      bottom: -1em;
      color: #f8f8f8;
      content: "▼";
      font-size: 1.4em;
      text-align: center;
    }
  
  .tooltip-content {
      z-index: 9999;
      margin-bottom: 0;
    }
  }
  </code></pre>