Angular Datatable：如何在悬停时获取列数据的工具提示

Question

我有一个数据表。悬停在表格单元格上时如何获取tooltip？尝试了以下类型，tooltip 正在填充。如何使用 Angular 获得相同的效果？

 $(document).on("mousemove", "tr td", function () {
  var colVal = $(this).text();
 $(this).prop("title", colVal);
});

Working Stackblitz

Answer 1

您可以通过实施引导程序轻松实现这一目标。像这样的东西应该可以解决问题：

<tbody>
  <tr *ngFor="let person of persons">
    <td data-container="body" data-toggle="tooltip" data-placement = "bottom" title="{{yourTooltip.content}}" >
       <input type="checkbox" [disabled]="person.firstName === 'Superman'"
       class="checkboxCls" [value]="person.checked" [checked]="person.checked"
       name="id" (change)="person.checked = !person.checked">
   </td>
    <td data-container="body" data-toggle="tooltip" data-placement = "bottom" title="{{yourTooltip.content}}">{{ person.id }}</td>
    <td data-container="body" data-toggle="tooltip" data-placement = "bottom" title="{{yourTooltip.content}}">{{ person.firstName }}</td>
    <td data-container="body" data-toggle="tooltip" data-placement = "bottom" title="{{yourTooltip.content}}">{{ person.lastName }}</td>
  </tr>
</tbody>

不要忘记始终添加data-container="body"，否则工具提示会在悬停时将表格单元格向右移动一点。