Show hidden content on hovering ellipses in a table td

Table shows ellipses when it exceeds maximum characters.On hovering ellipses,it shows the hidden content.

by Akhil Yalla

HTML

<div class="container-fluid">
  <h1>Text overflow in a table cell</h1>
  <table class="table">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td class="cell-4">
          <span class="text-overflow">Cell 4 is really really long and needs to wrap because it's so long</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.table {
  table-layout: fixed;
}
.text-overflow {
  display:block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cell-4 {
  max-width: 100px;
}
.text-overflow:hover
{
      overflow: visible; 
    white-space: normal; 
}