PrimeReact Data table - How to show tooltip or title on a cell?

[venubothsa]

I'm display a data table using prime react data table and I wanted to show tooltip or title like marked in below image, when mouse over doing on a cell.


I went through the Column component and i didn't find any relevant keyword to display tooltip or title on a cell, which is being used to show columns in data table.

Code:

Code: Select all

<DataTable
  value={this.state.products3}
  editMode="row"
  dataKey="id"
  onRowEditInit={this.onRowEditInit}
  onRowEditCancel={this.onRowEditCancel}
>
  <Column field="code" header="Code" editor={(props) => this.codeEditor('products3', props)}></Column>
  <Column rowEditor headerStyle={{ width: '7rem' }} bodyStyle={{ textAlign: 'center' }} title='Edit'></Column>
</DataTable>

Source: https://primefaces.org/primereact/showc ... table/edit
Stack Overflow Question: https://stackoverflow.com/questions/638 ... -on-a-cell

[mert.sincan]

Hi,

Sorry for the delayed repsonse. This issue has been fixed in StackOverflow. Also, you can use <Tooltip> component with target property;
https://www.primefaces.org/primereact/s ... /#/tooltip

Best Regards,

[abhijeetsinha9]

I could not find the stackoverflow reference for this.

[mcandu]

Hi, first import

Code: Select all

import { Tooltip } from "primereact/tooltip";

and try

Code: Select all

<Tooltip
  target=".p-dt-tooltip"
  content="Edit"
  mouseTrack
  mouseTrackLeft={10}
/>
<DataTable
  value={this.state.products3}
  editMode="row"
  dataKey="id"
  onRowEditInit={this.onRowEditInit}
  onRowEditCancel={this.onRowEditCancel}
>
  <Column field="code" header="Code" editor={(props) => this.codeEditor('products3', props)}></Column>
  <Column className="p-dt-tooltip" rowEditor headerStyle={{ width: '7rem' }} bodyStyle={{ textAlign: 'center' }} title='Edit'></Column>
</DataTable>