How to apply text-overflow: ellipsis and overflow: unset together

Question

How can I handle the css that I need to set up overflow: unset to let me poptip display when hovering and also display ellipsis once data in cell is oversize? I have following HTML under my table. In order to make sure div element pop up a warning message that does not cover by td element when hovering on span element. I have to set overflow: unset on td level. After setting that up, it seems like text-overflow does not work anymore? Suggestion? I check some posts and all mentioned about overflow: hidden so i am wondering if any solution for me? Apply "text-overflow: ellipsis;" to inner div and List Overflow; Do text-overflow: ellipsis;

My code:

.tr .td {
    position: sticky
    overflow: unset;
    z-index: 2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

<tr>
  <td class="td" role="cell" style="position: sticky; left: 46px;">
     <span class="data" aria-expanded="false">
        cell data
        <div class="poptip" role="tooltip" aria-hidden="true"></div>
     </span>
  </td>
</tr>