Question

我正在一个练习网站上创建表格。我的目标是将鼠标悬停在表格中的特定单元格上时显示某种类型的弹出消息。我不确定该怎么做，搜索时还没有成功。我目前正在将Angular 7 / Bootstrap与Visual Studio代码一起使用。

HTML文件

<table class="table table-bordered table-condensed table-responsive table-hover-cells" >
  <thead>
    <th>Wood Type</th>
  </thead>
  <tbody>
    <tr class="active">
      <td (click)="">Acacia</td>
      <td>Hazel</td>
    </tr>
    <tr class="active">
      <td>Alder</td>
      <td>Holly</td>
    </tr>
    <tr class="active">
      <td>Apple</td>
      <td>Hornbeam</td>
    </tr>
  </tbody>
</table>

CSS文件（该文件是在网上找到的，我不是自己写的。不知道它是如何工作的，但确实可以。）

 .table-hover-cells > tbody > tr > th.active:hover,
 .table-hover-cells > tbody > tr > td.active:hover,
 .table-hover-cells > tbody > tr.active > th:hover,
 .table-hover-cells > tbody > tr.active > td:hover {
  background-color: #e8e8e8;}

Answer 1

我建议使用“材料设计”并使用工具提示：https://material.angular.io/components/tooltip/overview

 <button mat-raised-button
        matTooltip="Info about the action"
        aria-label="Button that displays a tooltip when focused or hovered over">
  Action
</button>

使用Angular7 / Bootstrap将鼠标悬停在表格单元上时显示其他信息

1 个答案: