Material-ui: [Table] table cell hover tooltip

[mauvew]

Problem description

Is it possible to provide the feature that when the cursor hovers to the table cell in the Table component, a tooltip appears and display the content of the cell. Like the following pic shows, if there is no tooltip, some part of the content will not be visible. Or any suggestion on how to deal with this situation?

Versions

• Material-UI: 0.16.1
• React:
• Browser:

[TheoNolasco]

Looking for a suggestion as well to make the tooltip more visible in a table. Possibly center-left or center-right?

[lorenzoid]

+1 on this.

[noopnik]

+1

[m2mathew]

As of release v.0.17.0, we can now use tooltipPosition: 'center-right' due to #6072. Good fix!

[jpsantos7]

Hey guys! this is a good idea but it is not quite working.
I'm getting these warnings:

Invalid proptooltipPositionof valuecenter-rightsupplied toIconButton, expected one of ["bottom-center","bottom-left","bottom-right","top-center","top-left","top-right"]

and

Invalid propverticalPositionof valuecentersupplied toTooltip, expected one of ["top","bottom"].

Additionally the IconButton is not really clickable once the tooltip is on top of it unfortunately.

Maybe a tooltipPosition: 'center-left' would be also cool for when the IconButton is located on the last <td> and the tooltip gets cut on the right because it goes out of the table.

A solution to the button not being clickable when the tooltip is on top of it would be to make the tooltip appear on the right and/or left of the IconButton instead of on the center.
Just my 2 cents.

[andrewrome]

+1 on this.
The closest I've gotten is

<TableRowColumn 
    onMouseEnter={()=>{this.setState({hoveredTooltip: true})}}
    onMouseLeave={()=>{this.setState({hoveredTooltip: false})}}>
        My text here
</TableRowColumn>
<Tooltip show={this.state.hoveredTooltip}
         label="My label here"
         touch={true}
/>

[oliviertassinari]

Closing for #2230

[Shrroy]

simply you can achieve this through these steps:

npm Install react-tippy
then
import 'react-tippy/dist/tippy.css'
import { Tooltip } from 'react-tippy';

 <TableRowColumn>
     <Tooltip trigger="mouseenter" 
                   size='small' 
                  useContext html={(<p>Hidden Text</p>)}>Hover me</Tooltip>
</TableRowColumn>

more info https://github.com/tvkhoa/react-tippy

[syedmrizwan]

Tooltip will be visible by adding TITLE ATTRIBUTE to the TableRowColumn as shown below:
<TableRowColumn title='Text to be displayed in the Tool Tip'>Hover me</TableRowColumn>

[TiagoPortfolio]

Tooltip will be visible by adding TITLE ATTRIBUTE to the TableRowColumn as shown below:
<TableRowColumn title='Text to be displayed in the Tool Tip'>Hover me</TableRowColumn>

That's not the material-ui tooltip though...

[royliu007]

this is what I made in my project:

import Tooltip from '@material-ui/core/Tooltip'
... 
<TableCell>
    <Tooltip title={row.name} placement='right'>
        <div>{  row.name ? row.name.slice(0, 4) + '...' : ' -- ' }</div>
    </Tooltip>
</TableCell>
...

it works like using CSS but with the tooltip to show the whole text
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',