Tooltips shown over a RadioButtonGroup are unreadable

[rlansky]

Problem description

In a dialog, I have an IconButton element with a tooltip attribute defined. The tooltip is shown correctly when the button is hovered over, but the display of the tooltip is messed up. Specifically, the background of the tooltip is lighter than expected and the white text shows the content of the dialog behind it. The result of this is that when the tooltip is shown over existing text in the dialog, it is nearly unreadable.

I've attached a screenshot that shows the problem.

I suspect this had something to do with a z-index problem, but no amount of fiddling with z-index attributes in the document was able to resolve this issue.

Versions

• Material-UI: 0.16.0 (latest)
• React: 15.3.2 (latest)
• Browser: Chrome (latest)

[lucasbento]

Can you provide a snippet?

[rlansky]

The snippet that creates the tooltip is:

Meeting Type <IconButton tooltip={tooltipContent} touch={true}><Help /></IconButton>

I've tried this with and without the touch attribute set.

[lucasbento]

@rlansky: I am sorry but I'm not being able to reproduce that issue, can you please provide a pen?

[rlansky]

Hi,

Thanks for taking a look. I created a sample that demonstrates the problem here: pen

When I first wrote this pen, I wasn't see the problem either. It turns out that the key to reproducing the problem is that the tooltip is being shown over a RadioButtonGroup. Sorry that I left that out earlier, I didn't realize that was a key component to the problem.

Also, as part of creating this demo, I've found that the Dialog has nothing to do with this problem. When I do the same thing in a non-dialog component, the same problem occurs.

[lucasbento]

This is an issue with the CSS property position: relative on the wrapper <div /> on each checkbox and in the label (text content).

cc @oliviertassinari, not sure how to solve this, removing those 2 properties did not break the layout and works fine:

btw, I removed them through chrome devtools.

[lucasbento]

By the way, thanks for sharing that pen @rlansky, really helpful!

[rlansky]

@lucasbento, thanks for that tip.

I found that when I changed the position: relative property, this did work for the label text (as seen in your screen shot). But I couldn't get it to work on the radio button inputs, those always showed up on top of the tooltip... I've added more text to the example so that this is easier to see.

[lucasbento]

@rlansky: no problem.

I did not see that the same was happening with the checkbox element, I also didn't find a way to fix that.

A good workaround for now would be to try to use the tooltip after the checkbox, not above it.

[FlyingDR]

Same issue occurs when tooltip overlaps Toggle's label (using v0.16.2):

The reason of the issue seems to be lack of z-index style on element, tooltip is attached to (as I can see from sources - it is IconButton and TableHeaderColumn). It can be solved by adding z-index style to element either permanently or when tooltip is visible.

[FlyingDR]

Looks like this piece of CSS may help to workaround this issue until it will be fixed:

button[type="button"]:hover, button[type="button"]:focus {
    z-index: 10 !important;
}

[oliviertassinari]

Closing for #2230