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

{{item.name}
----代码在这里----

---

我有上面写的HTML代码，悬停在名称上，我应该能够查看详细信息。

给表格单元格一个相对的位置，然后给弹出窗口一个绝对的位置，这就是它的重叠。然后只需将其显示切换为悬停。我用

translateY

控制偏移量

。详细信息{
位置：相对位置；
}
.详情跨度{
位置：绝对位置；
排名：0；
转化：translateY（70%）；
显示：无；
背景：白色；
z指数：20；
最小宽度：100%；
填充：1rem；
边框：1px纯黑；
}
。详情：悬停范围{
显示：内联；
}
运输署{
填充：1rem；
背景：白烟；
边框：1px纯黑；
}

悬停查看详细信息
更多信息请点击这里
东西
东西
东西
悬停查看详细信息
更多信息请点击这里
东西
东西
东西
悬停查看详细信息
更多信息请点击这里
东西
东西
东西

有什么东西阻止你这样做？有问题吗？是的，事实上，我正在将代码放入span中，表正在扩展，而且我的位置是相对的。我不知道为什么会发生这种情况，因为您没有从文档流中删除隐藏的元素，所以它正在扩展。如果出现，单元格将增长，然后表格将扩展。您需要将其位置设置为绝对，以将其从文档流中删除。

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