Show a toast containing the whole text on hover

Question

There is a text that is longer than the accepted width and it must be shown truncated, just show a part of it and three dots and the end.

This part works fine. What I want is to show the whole text when hovering over it into a toast while also keeping the original truncated text under it.

think that a toaster-like notification box is what would look good in this case.

At the moment it shows the whole text on hover but it covers completely the truncated one. Is there a way to do it?

.product-details {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 120px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.product-details:hover {
  overflow: hidden;
  width: 120px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: visible;
  white-space: normal;
  width: auto;
  border: 1px solid #000000;
  padding: 15px;
}

<div class="product-details">this is a very very long text of course
</div>

Answer 1

.product-details {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 120px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  cursor: pointer;
}

.product-details:hover + .product-details-full {

  width: 120px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
  width: auto;
  border: 1px solid #000000;
  padding: 15px;
  display: block
}

.product-details-full {
 display: none;}

<div class="product-details">this is a very very long text of course
   
</div>
<div class="product-details-full">this is a very very long text of course
</div>