title: How do I get the Angular pTooltip to show using PrimeNg?
body: <p>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:</p>
  
  <pre><code>{{statement.description}}
  </code></pre>
  
  <p>The table does not display. If I do:</p>
  
  <pre><code>statement.description
  </code></pre>
  
  <p>the table shows but the pTooltip only shows the text "statement.description".</p>
  
  <p>This is the data table code in the template:</p>
  
  <pre><code>    &lt;p-dataTable [globalFilter]="gb" [value]="statements" [paginator]="true" [rows]="3" selectionMode="single" id="dtt" [(selection)]="selectedStatement" (onRowClick)="selectOverlay($event, statement, op)" (onRowDblclick)="onRowSelect($event)"&gt;
          &lt;p-header&gt;
          Statements from this source
          &lt;/p-header&gt;
          &lt;p-column field="description" header="Description"&gt;
              &lt;ng-template let-col let-row="rowData" let-ri="rowIndex" pTemplate="body" &gt;
                  &lt;span #z&gt;{{ row[col.field] | truncate:[150] }}&lt;i tabindex="0" class="fa fa-ellipsis-h" aria-hidden="true" tooltipEvent="focus" tooltipPosition="top" pTooltip="{{statement.description}}"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;/ng-template&gt;
          &lt;/p-column&gt;
          &lt;p-column [style]="{'width': '1.5em'}"&gt;
              &lt;ng-template let-col let-row="rowData" let-ri="rowIndex" pTemplate="body"&gt;
                  &lt;span&gt;&lt;i class="icon-unlink"&gt;&lt;/i&gt;&lt;/span&gt; 
              &lt;/ng-template&gt;    
          &lt;/p-column&gt;
      &lt;/p-dataTable&gt;
  </code></pre>