选择组件中MenuItem上的Material-UI工具提示zIndex [英] Material-UI Tooltip zIndex over MenuItem in Select component

问题描述

我的问题很简单，我在< Select> 组件周围有一个< Tooltip> 组件，当我单击Select时，该工具提示显示在MenuItems上方像这样:

My problem is simple, I have a <Tooltip> component surrounding a <Select> component and when I click the Select, the tooltip shows over the MenuItems like so:

正常行为:

行为不正常:

因此，我为Material-UI和工具提示保留了所有默认值: zIndex:1500 ，但是我所看到的MenuItem都没有.我试图将MenuItem的zIndex设置为1501，但是它仍然具有相同的行为.

So I left all of the default values for Material-UI and for the Tooltip it's: zIndex: 1500 but there is none for the MenuItem from what I've seen. I tried to set the zIndex of MenuItem to 1501 but it still has the same behaviour.

我想知道将工具提示留在MenuItem后面的干净方法是什么，如果不可能，那么在打开Select MenuItems时仅隐藏工具提示...

I was wondering what's the clean way to either leave the tooltip behind the MenuItem and if that's not possible then to just hide the tooltip when the Select MenuItems are opened...

这是我的代码:

<Tooltip title={'Filter by status'}>
    <Select value={this.state.status} onChange={this.handleChange.bind(this, Filter.Status)}>
        {statuses.sort(this.filterItemSortFn).map(item => {
            return (<MenuItem style={{zIndex: 1501}} value={item}>{item}</MenuItem>);
        })}
    </Select>
</Tooltip>

如果我将工具提示的zIndex设置为较小的值，并且它隐藏在menuItems的后面，但是我真的不想使用默认值，因为它还会干扰其他zIndex值.

If I set the zIndex of the tooltip to a smaller value and it hides behind the menuItems, but I don't really wanna play with the default values, since it also interferes with other zIndex values.

我制作了一个CodeSandbox: https://codesandbox.io/s/rn68z4xlo

I made a CodeSandbox: https://codesandbox.io/s/rn68z4xlo

推荐答案

这是Material-Ui工具提示中的错误，我想它已经在新版本中修复了

This is a bug in Material-Ui Tooltip and I guess it's already fixed in the new version

您可以通过在工具提示中添加zIndex来解决问题

You can fix the problem by adding zIndex to your tooltip

  <Tooltip title={"Message"} style={{ zIndex: '1' }}>
        <Select 
          value={this.state.name}
          onChange={this.handleChange}
          input={<Input id="select-multiple" />}
          MenuProps={MenuProps}
        >
          {names.map(name => (
            <MenuItem key={name} value={name}>
              {name}
            </MenuItem>
          ))}
        </Select>
      </Tooltip>

或者如果您要在菜单打开时完全隐藏它，请使用此代码

Or if you want to hide it completely if the menu open use this code

 <Tooltip title={"Message"} 
            onClick={() => this.setState({ tooltip: !this.state.tooltip })}
          style={this.state.tooltip ? {display: 'none'}:{ zIndex: '1' }}>
            <Select 
              value={this.state.name}
              onChange={this.handleChange}
              input={<Input id="select-multiple" />}
              MenuProps={MenuProps}
            >
              {names.map(name => (
                <MenuItem key={name} value={name}>
                  {name}
                </MenuItem>
              ))}
            </Select>
          </Tooltip>

定义的工具提示状态

class MultipleSelect extends React.Component {
  state = {
    name: [],
    tooltip: false,
  };

https://codesandbox.io/s/0xrlmv96vl

这篇关于选择组件中MenuItem上的Material-UI工具提示zIndex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！