如何在Primeng DataTable中为每个单元格添加一个工具提示

Question

我的模板看起来像

<p-dataTable [value]="devices">
  <p-column field="icon" [style]="{'width':'140px'}" header="{{ 'COMMON.STATUS' | translate }}"></p-column>
  <p-column field="name" [sortable]="true" [filter]="true" filterMatchMode="contains" styleClass="ui-grid-cell-contents" header="{{ 'COMMON.ALIAS' | translate }} "></p-column>
  <p-column field="comment" [sortable]="true" [filter]="true" filterMatchMode="contains" [style]="{'width':'20%'}" styleClass="ui-grid-cell-contents" header="{{ 'COMMON.COMMENT' | translate }}"></p-column>
</p-dataTable>

我尝试添加到列

<ng-template let-col let-row="rowData" pTemplate="body" pTooltip="row[col.field]">
  {{row[col.field]}}
</ng-template>

但是它不起作用。

Answer 1

您可以将其添加到跨度{{row [col.field]}}

例如

<template pTemplate="body" let-col let-row="rowData">
            <span pTooltip="this is a tooltip!" appendTo="target" 
                   style="position: relative">
              {{row[col.field]}}
            </span>
</template>

Answer 2

或您可以尝试：

<p-table [value]="clients">
 <ng-template pTemplate="body" let-client>
    <tr [pSelectableRow]="client">
         <td *ngFor="let col of cols"  pTooltip="{{client[col.field]}}" class="p-mb-3 demo-container p-text-nowrap p-text-truncate">
                            {{client[col.field]}}
         </td>
    </tr>
 </ng-template>
</p-table>

这样，您还具有包装和工具提示;）