Show popup when hovering a table cell

Question

<tr *ngFor="let item of collection.data | paginate: config">
        <th scope="row">
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" [attr.id]="item.id">
            <label class="custom-control-label" [attr.for]="item.id"></label>
          </div>
        </th>
        <td>{{item.name}}
          ----code here----
          </span>
        </td>

I have the HTML code above written and on hover on the name I should be able to view the details.

Answer 1

Give the table cell a position of relative, then you give the popup a position of absolute so that's its overlapping. Then just toggle its display on hover. I control the offset with translateY.

.has-details {
  position: relative;
}

.details {
  position: absolute;
  top: 0;
  transform: translateY(70%) scale(0);
  transition: transform 0.1s ease-in;
  transform-origin: left;
  display: inline;
  background: white;
  z-index: 20;
  min-width: 100%;
  padding: 1rem;
  border: 1px solid black;
}

.has-details:hover span {
  transform: translateY(70%) scale(1);
}

td {
  padding: 1rem;
  background: whitesmoke;
  border: 1px solid black;
}

table {
  border-collapse: collapse;
}

<table>
  <tr>
    <td class='has-details'>
      hover for details
      <span class="details">more info here</span>
    </td>
    <td>stuff</td>
    <td>stuff</td>
    <td>stuff</td>
  </tr>
  <tr>
    <td class='has-details'>
      hover for details
      <span class="details">more info here</span>
    </td>
    <td>stuff</td>
    <td>stuff</td>
    <td>stuff</td>
  </tr>
  <tr>
    <td class='has-details'>
      hover for details
      <span class="details">more info here</span>
    </td>
    <td>stuff</td>
    <td>stuff</td>
    <td>stuff</td>
  </tr>
</table>