Antd: Tooltip on table row

Question

I've created a table in antd, but i need that when the mouse is over the row a tooltip should show.

I'm doing this in the columns definition (rendering a tooltip for each cell), but in this way the tooltip hides between cells.

Example:

   {
            title: 'Fecha de Pedido',
            dataIndex: 'fecha_pedido',
            rowKey: 'fecha_pedido',
            key: 'fecha_pedido',
            sorter: (a, b) => moment(a.fecha_pedido).unix() - moment(b.fecha_pedido).unix(),
            render:(text, record)=>(
               
                <Tooltip title="Click para ver el detalle del pedido">
                <span>{moment(record.fecha_pedido).format('DD-MM-YYYY HH:mm a')}</span>
              </Tooltip> 
             
            ),
        },

Is there a way to show the tooltip in the entire row (instead of each cell)?

Thanks in advance, if you need any extra code snippet just please let me know.

Answer 1

You should custom table row component by components.body.row of Table 's props.

Example in CodeSandbox: https://codesandbox.io/s/jibenyongfa-antd4150-forked-3djn4?file=/index.js:1742-1752