3

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.

enter image description here

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:

<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/showcase/#/datatable/edit

Your answer will be appreciated!

Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
Venu
  • 348
  • 4
  • 17

1 Answers1

4

One way to fix this would be to use a custom body for your column. Like this:

<Column body={() => <Button icon="pi pi-pencil" className="p-button-rounded p-button-text" tooltip="Here's the tooltip!" />} headerStyle={{ width: '7rem' }} bodyStyle={{ textAlign: 'center' }} title="Edit"></Column>

tooltip on button

Unfortunately I could not get this to work while also having the rowEditor property set, as in your example.

zeepk
  • 108
  • 6