JSFiddle - React, Tailwind, and code Playground

HTML

<table><tr>
  <td class="hover-text" style="width: 99px">
    <div style="width: 99px">A loA long textA long textA long textng text</div>
  </td>
  <td class="hover-text" style="width: 1199px">
    <div style="width: 1199px">A loA long textA long textA long textng text</div>
  </td>
</tr></table>

CSS

td{
    border: 1px solid;
}

.hover-text div{
  text-overflow: ellipsis;
    overflow:hidden;
    white-space:nowrap;
    width:100%;    
    background-color: white;
}
.hover-text:hover div{
  overflow: visible;
  z-index: 1;
  width: auto !important;
  position: absolute;
  background-color: white;
    margin-top: -10px;
    padding-right: 20px;
}