Karthik Kumar

Karthik Kumar

  • NA
  • 182
  • 21.2k

How to use tool tip in prime ng dynamic data table ?

Nov 2 2017 8:07 AM

How to use tool tip in prime ng dynamic data table for Angular 4

 
 

I am using primeface datatable with Angular 4,having dynamic rows. how I can show a tooltip whenever a user hovers over a row in my primefaces datatable? Also, the tooltip needs to display a created and updated date coming from the API server.Each row having diffrent dates.While mouse over a row it should show the created and updated dates of particular row.I cannot find any solutions .Am using primeface latest version with Angular.Am using pTemplate and pTooltip but its not working

My data tableis like..

<p-dataTable #dt [value]="Slist" styleClass="myTable" exportFilename="Pno12list" reorderableColumns="true" resizableColumns="true" columnResizeMode="expand" selectionMode="single" [(selection)]="selectedResource" [responsive]="true" [rows]="8" [paginator]="true" scrollHeight="300px">

<p-header>

<div style="text-align:left">

<p-multiSelect [options]="columnOptions" [(ngModel)]="cols"></p-multiSelect>

</div>

</p-header>

<p-column *ngFor="let col of cols"

[header]="col.Header"

[field]="col.Field"

[sortable]="true"

[filter]="true"

filterMatchMode="startsWith"

filterPlaceholder="Search"

>

<template pTemplate="body" let-col let-row="rowData">

<span pTooltip="this is a tooltip!" appendTo="target"

style="position: relative">

{{row[col.field]}}

</span>

</template>

</p-column>

Many Thanks in advance..