[IconButton] Tooltip hidden behind TableRowColumn's row

[lucasbento]

Problem description

When used inside a <TableRowColumn/>, <IconButton/>'s tooltip appears to be behind the rows, it appears during the transition and disappears on row's limit.

Steps to reproduce

Simply include a <IconButton/> component using tooltip prop inside a <TableRowColumn/>.

Versions

• Material-UI: 0.15.2
• React: 15.2.1
• Browser: Chrome 51.0.2704.106 (64-bit)

[bteepell]

Have you found a resolution to this?

[lucasbento]

@bteepell nope, just did not use it since I had to deliver the project fast.

But still waiting for a fix or workaround.

[bteepell]

I changed the height of the tablerow to 65px from default 48 and size of the IconButton style to 24px,24px. Worked for me

[bteepell]

This is not only a Chrome issue.

[seminull]

I'm having this issue also. It would be nice workaround if the tooltipPosition had a straight "left" or "right" option.

[lucasbento]

This issue was previously fixed by #5014, which introduced the regression #5377.

We should definitely follow what @oliviertassinari said:

The <Tooltip /> should most likely be render outside of the current DOM hierarchy.

[lmammino]

Very interested on this as well!

[bteepell]

style set to overflow: 'visible' works for me on all browsers but in IE 11 and IE only the very first row the Tooltip does not overflow.

[peterjcaulfield]

Thanks @bteepell! this is the only thing that worked for me in stopping the tooltip being hidden by it's parent container 👍

[JustinBeckwith]

I was also able to fix this by using position: absolute on the container in the row that has my buttons.

[alexhayes]

@bteepell's suggestion works however be aware that you need to change the tooltipPosition of the last row, for example;

<TableRowColumn style={{ overflow: 'visible' }}>
  <IconButton
    tooltip='Mark done'
    tooltipPosition={isLastRow ? 'top-center' : 'bottom-center'}
  >
    <DoneIcon />
  </IconButton>
</TableRowColumn>

[IzaGz]

nothing works , tooltip still hidden

[sashion]

@IzaGz <TableRowColumn style={{ overflow: 'visible' }}> should do the job.

[kr1stjans]

None of the solutions worked for my case.

I have two cards next to each other and tooltip is hidden under the second card. I tried to change tooltip and container properties without any luck. Any advices?

Also this:

Top icon's tooltip is below bottom icon.

[oliviertassinari]

Closing for #2230

[IzaGz]

@oliviertassinari why is it closing? it does not work!

[oliviertassinari]

@IzaGz, we moved our interest on the v1-beta branch where this issue is mostly fixed.

[ralphsmith80]

I'm noticing this with expansion panel on 1.0.0-beta.31.

Setting CollapseProps={{style:{ overflow: 'visible' }}} fixes the tooltip issue but cause the content to not be hidden when the panel is collapsed.

Here's a codesandbox example

I agree with the @octavioamu assessment that

The should most likely be render outside of the current DOM hierarchy.

Is it worth filing a new issue for this in v1 or is it on the roadmap already?

[MrEfrem]

Also look same issue. overflow: visible is helped.