Material-ui: [Table] IconButton's Tooltip is hidden

[patrickml]

When trying to view an IconButton's tooltip while contained in a table cell it seems to be hidden by an overflow of some kind.

[ffxsam]

I literally came here to post this same issue.

[patrickml]

@ffxsam I was able to work around this by applying styling to the call to fix the overflow. Not ideal but it works for now.

[ffxsam]

@patrickml Would you mind sharing what you did to fix it? I tried applying a really high z-index to the tooltip but it didn't work.

[patrickml]

@ffxsam

{
  style: { overflow: 'visible', textAlign: 'right' },
}

[halayli]

I got it fixed by adding style={ { overflow: 'visible' } } to the TableRowColumn that IconButton resides in.

[UFOwl]

Same problem. Adding hoveredStyle={{ zIndex: 9999 }} to IconButton works for me.

[ShaggyYeti]

Hello.
I've dealt with the same problem. My solution is just add wrapperStyle={{overflow: 'visible'}} bodyStyle={{overflow: 'visible'}} to <Table> component and style={{overflow: 'visible'}} to <TableRowColumn> component.

Working example:

<Table wrapperStyle={{overflow: 'visible'}} bodyStyle={{overflow: 'visible'}}>
    <TableHeader>
        <TableRow>
            <TableHeaderColumn>i'm column header text</TableHeaderColumn>
        </TableRow>
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableRowColumn style={{overflow: 'visible'}}>
                <IconButton
                    tooltipPosition="bottom-right"
                    tooltip="Do U see me?">
                    <CheckIcon/>
                </IconButton>
            </TableRowColumn>
        </TableRow>
    </TableBody>
</Table>

[oliviertassinari]

Closing for #2230

[Lazer32]

Unfortunately this workaround fixes the tooltip issue, but causes problems with overflowing text in columns. Unless your data is going to match the size of your column exactly this will not work for you.