React-table: Full cell info on hover

[yannickneemaa]

version of React-Table are you using : 6.7.6

Is it possible, if some of my cells have long content, to use a fixed column width, and to have the full content on hover (with a tooltip or something else...).

Or if you have this use case, how do you solve it ?

Thanks !

[amlcodes]

Did you get this going? I'm working on this now

[mrruby]

Any updates?

[mrubin]

This would be great. Along the same lines, is there any way to have cell content not get truncated (with a "...") but go multi-line or somehow show the full content?

[amlcodes]

So I am already working with React.Semantic UI so their Popup on React Tables column definitions Cell: props => { return ( <Popup trigger={<div>{props.original.Name}</div>} content={props.original.Name} inverted /> ); }
like that is working for me. I would mess with overflow on tr div in css, I removed overflow ellipsis already

[JonathanKolnik]

+1

[vmengh]

In reacttable tooltip or hover text on a particular column or cell can also be achieved using the span tag with title attribute.
example below -

const columns = [
 {
        Header: "Message",
        accessor: "message",
        Cell: row => <div><span title={row.value}>{row.value}</span></div>
      }
];

[ivanchoff]

title is an option but what if it is required add more complex information in tooltip?, that is my case :(

[ariel262626]

In reacttable tooltip or hover text on a particular column or cell can also be achieved using the span tag with title attribute.
example below -

const columns = [
 {
        Header: "Message",
        accessor: "message",
        Cell: row => <div><span title={row.value}>{row.value}</span></div>
      }
];

hi thanks, works for me.
how can i design that tooltip?

[javed24]

In reacttable tooltip or hover text on a particular column or cell can also be achieved using the span tag with title attribute.
example below -

const columns = [
 {
        Header: "Message",
        accessor: "message",
        Cell: row => <div><span title={row.value}>{row.value}</span></div>
      }
];

does this still work? I'm doing the following to get a tooltip when hovering over the entire row, but it's not rendering the tooltip.

Cell: (row) => <div><span title={row.value}>{row.value}</span></div>