[SalesForce] how to display Tooltip on Lightning data table cells

How can to Implement Tool Tip in Lightning Data Table:

Lightning Data Table:

        <lightning:datatable
                         keyField="Id"
                         aura:id="dataTable"
                         data="{! v.data }"
                         columns="{! v.columns }"
                         hideCheckboxColumn="true"
                         showRowNumberColumn="false"
                         initialRows="{! v.recordsToDisplay}"
                         sortedBy="{! v.sortedBy }"
                         sortedDirection="{! v.sortedDirection }"
                         defaultSortDirection="{!v.defaultSortDirection}"
                         onsort="{! c.updateColumnSorting}"
                         onrowaction="{! c.handleRowAction }"
                         />

Js side:

   component.set('v.columns', [{
            label: 'Primary ID',
            fieldName: 'PrimaryId__c',
            type: 'text',
            sortable: true
        },
         {
            label: 'Primary ID Type',
            fieldName:'PrimaryIdType__c',
            type: 'text',
            sortable: true
        }
         ]);

Following columns:

cloumn 1:Primary ID , column 2: Primary ID Type

Showing cell values in the Image:

enter image description here

How to display My Tool tips Like below in Lightning data table Like below:

In tool tip needs to display Like below:

 Email : test@test.com   (hovering test@test.com- cell1)
 NucleusId : 566         (hovering on NucleusId - cell2)

I have refereed this post:

https://success.salesforce.com/ideaView?id=0873A0000003fVOQAY

Best Answer

This is not possible in standard Lightning Data Table as it supports tooltip only for URL type fields.

Related Topic