CSS Truncated text table hover

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table class="table table-bordered table-responsive table-hover">
  <thead>
    <tr>
      <th>Motorboats</th>
      <th>Railroads</th>
      <th>Moo Cows</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Boat 1
      </td>
      <td>
        <span>
          <a class="truncate">
            This is a really really really long text thing so it gets truncated
           </a>
          </span>
      </td>
      <td>
        Bessie
      </td>
    </tr>
    <tr>
      <td>
        Boat 1
      </td>
      <td>
        <span>
          <a class="truncate">
            This is a really really really long text thing so it gets truncated
           </a>
          </span>
      </td>
      <td>
        Bessie
      </td>
    </tr>
    <tr>
      <td>
        Boat 1
      </td>
      <td>
        <span>
          <a class="truncate">
            This is a really really really long text thing so it gets truncated
           </a>
          </span>
      </td>
      <td>
        Bessie
      </td>
    </tr>
    <tr>
      <td>
        Boat 1
      </td>
      <td>
        <span>
          <a class="truncate">
            This is a really really really long text thing so it gets truncated
           </a>
          </span>
      </td>
      <td>
        Bessie
      </td>
    </tr>
    <tr>
      <td>
        Boat 1
      </td>
      <td>
        <span>
          <a class="truncate">
            This is a really really really long text thing so it gets truncated
           </a>
          </span>
      </td>
      <td>
        Bessie
      </td>
    </tr>
  </tbody>
</table>

CSS

body {padding:10px}
.table tbody tr td span {
  height: 1.2em;
  position: relative;
  display: inline-block;
  margin-top: 5px;
}

.table tbody tr td span a {
  text-decoration: none;
  color: inherit;
}

.truncate {
  max-width: 80px;
  overflow: hidden;
  display: inline-block;
  
  white-space: nowrap;
}

.truncate:hover {
  position: absolute;
  max-width: none;
  z-index: 100;
  background: #f5f5f5;
  overflow: visible;
  top: -6px;
  padding: 5px 20px 5px 0;
}