0

I'm using PrimeNg and I have a data table. When I hover over the row/cell I want the contents of that cell to display in a pTooltip. When I do:

{{statement.description}}

The table does not display. If I do:

statement.description

the table shows but the pTooltip only shows the text "statement.description".

This is the data table code in the template:

    <p-dataTable [globalFilter]="gb" [value]="statements" [paginator]="true" [rows]="3" selectionMode="single" id="dtt" [(selection)]="selectedStatement" (onRowClick)="selectOverlay($event, statement, op)" (onRowDblclick)="onRowSelect($event)">
        <p-header>
        Statements from this source
        </p-header>
        <p-column field="description" header="Description">
            <ng-template let-col let-row="rowData" let-ri="rowIndex" pTemplate="body" >
                <span #z>{{ row[col.field] | truncate:[150] }}<i tabindex="0" class="fa fa-ellipsis-h" aria-hidden="true" tooltipEvent="focus" tooltipPosition="top" pTooltip="{{statement.description}}"></i></span>
            </ng-template>
        </p-column>
        <p-column [style]="{'width': '1.5em'}">
            <ng-template let-col let-row="rowData" let-ri="rowIndex" pTemplate="body">
                <span><i class="icon-unlink"></i></span> 
            </ng-template>    
        </p-column>
    </p-dataTable>
averroes
  • 171
  • 3
  • 16

1 Answers1

3

Try [pTooltip]="statement.description" (with the square braces)

Milo
  • 3,365
  • 9
  • 30
  • 44