悬停表格单元格时显示弹出窗口答案

【问题标题】：Show popup when hovering a table cell悬停表格单元格时显示弹出窗口
【发布时间】：2020-08-17 03:47:09
【问题描述】：

<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>

我已经编写了上面的 HTML 代码，并且将鼠标悬停在名称上我应该能够查看详细信息。

【问题讨论】：

是什么阻止了您实现这一目标？有问题吗？
是的，实际上正在发生的事情是我将代码放入 span 并且表格正在扩展，而且我的位置也是相对的。我不知道为什么会这样
表格正在扩展，因为您没有将隐藏元素从文档流中取出。如果它出现，则单元格会增长，然后表格会扩展。您需要将其位置设置为绝对位置才能将其从文档流中移除。

标签： html css angular

【解决方案1】：

给表格单元格一个位置relative，然后你给弹出窗口一个位置absolute，这样它就是重叠的。然后只需在悬停时切换其显示。我用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>

【讨论】：