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

Question

我有一个数据表。如何得到tooltip而悬停在表单元格?尝试下面的类型，tooltip正在填充。如何得到相同的使用角?

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

工作Stackblitz

Answer 1

通过实现bootstrap可以很容易地实现这一点。像这样的代码应该可以达到这个效果:

<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"，否则工具提示将在悬停时向右移动表格单元格。