Conditionally render tooltip dependant on state

[richewinqred]

I have a table and would like to conditionally render a tooltip on hover of a cell.

Is this possible?

My content is conditionally rendered outside of the table, but won't work when adding to the cell.

My onmouse events work as expected.

Here is some example code:

  const [showTooltip, setShowTooltip] = useState(false);


 {
        header: 'Status',
        accessorKey: 'status',
        cell: (row) => (
          <div
            onMouseEnter={() => {
              setShowTooltip(true);
            }}
            onMouseLeave={() => {
              setShowTooltip(false);
            }}
          >
            {getCellCopyDependantOnStatus(row, copyConfig)}
            {showTooltip && 'Tooltip'}
          </div>
        ),
      },
   

[TonyVeigel]

const table = useReactTable(
    {
      columns,
      data,
      meta: {showTooltip}
  );

 cell: ({table}) =>  table.options.meta.showTooltip