Show text when ellipsis starts

Question

I need the div to be shown hover only when truncation of text starts.

This my code

.default-txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50px;
}

.hover-txt {
  display: none;
}

.default-txt:hover~.hover-txt {
  display: block;
  position: absolute;
  background: #fff;
  box-shadow: 0 0 16px 0 rgba(53, 60, 60, 0.08);
  padding: 10px;
  z-index: 999;
  right: 0%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

<div class="default-txt">
  this is the hidden text
  <div class="hover-txt">This is the hidden text</div>
</div>

The .hover-txt is shown as soon as i hover on .default-txt even when it is not ellipse. I need to show the .hover-txt when truncation starts