Getting a tooltip on a table row in an app

[SjoerdB]

Hi,

I would like to get a tooltip on a table row in my app, however the tooltip is only meant for buttons and inputs, not for table elements.

If I look at e.g. the delivered "Logs" app, I see a button is used for the complete row. What construct is used here, how could I mimic this in my app?

[dani_coll]

Hi SjoerdB!

Which version of the logs app do you have? I'm taking a look at the app v1.14.0 and there is no button on my table

[SjoerdB]

for me, it's the 1.13.0...

But... do you get a tooltip on the (long) values, showing you the complete record...

because if so, then maybe this version either is using an input as field, or moved the button down to cell level to do a tooltip per individual cell..

[dani_coll]

Hi SjoerdB, apologies for the delay.

Looks like version 1.14.0 of Logs app onwards is using a newer version of Strato where the DataTableV2 does not have the button element as a child of the row anymore, now they are controlling the interactivity of the row within the row element.

Unfortunately, there is no way to have a tooltip on the row level. Only on the cell level do we allow custom-rendered cells, configured by column definition:

const columnsWithCustomCell: DataTableV2ColumnDef<(typeof data)[number]>[] = [
  {
    header: 'FirstName',
    id: 'firstname',
    accessor: 'firstname',
    width: 'auto',
  },
   {
    header: 'LastName',
    id: 'lastname',
    accessor: 'lastname',
    width: 'auto',
    cell: ({ value, rowId }) => {. =========================== HERE =============================
      return (
        <DataTableV2.DefaultCell>
          <TerminologyOverlay>
            <TerminologyOverlay.Trigger>{value}</TerminologyOverlay.Trigger>
            <TerminologyOverlay.Description>
              <div
                onClick={() =>
                  console.log(`clicked description of cell in row "${rowId}"`)
                }
              >
                {`This is a description of cell in row "${rowId}".`}
              </div>
            </TerminologyOverlay.Description>
          </TerminologyOverlay>
        </DataTableV2.DefaultCell>
      );
    },
  },
];