javascript - Antd: Tooltip on table row - Stack Overflow

admin管理员组

文章数量:1294325

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.

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.

• javascript
• antd

Share Improve this question Follow asked Apr 7, 2021 at 15:22 StepStep 14944 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You should custom table row ponent by ponents.body.row of Table's props.

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

本文标签： javascriptAntd Tooltip on table rowStack Overflow