reactjs - 禁用或隐藏工具提示而不管理提示状态（材料 UI）

问题描述

因此，我有一个带有子选择的文本字段，而该子菜单又具有这样的子菜单：

<Tooltip
                    title={
                      features.length > 1
                        ? features
                            .map((feat) => FeatureOptions.find((f) => f.value === feat).label)
                            .join(", ")
                        : ""
                    }
                    placement="'bottom-start'"
                  >
                    <TextField
                      label="ML Features"
                      variant="outlined"
                      margin="dense"
                      select
                      multiple
                      fullWidth
                      InputLabelProps={{ shrink: true, margin: "dense" }}
                      SelectProps={{
                        multiple: true,
                        value: features,
                        displayEmpty: true,
                        renderValue: (features) =>
                          features.length > 0
                            ? features
                                .map((feat) => FeatureOptions.find((f) => f.value === feat).label)
                                .join(", ")
                            : "None",
                        onChange: (event) => setFeatures(event.target.value),
                        MenuProps,
                        classes: {
                          root: classes.selectOutlined,
                          outlined: classes.outlined,
                          iconOutlined: classes.iconOutlined
                        }
                      }}
                    >
                      {FeatureOptions.map((opt, i) => (
                        <MenuItem key={opt.value} value={opt.value} dense>
                          <Checkbox size="small" checked={features.includes(opt.value)} />
                          {opt.label}
                        </MenuItem>
                      ))}
                    </TextField>
                  </Tooltip>

我的问题是工具提示第一次出现在菜单项上方并且非常不愉快，如下所示：

我真的只希望在将鼠标悬停在文本字段本身上时显示工具提示，但由于文本字段包含选择和菜单项，因此它也在那里被激活。

尝试的解决方案：这里是什么： Material-UI Tooltip zIndex over MenuItem in Select component 遗憾的是，这不起作用，我也尝试弄乱PopperProps但没有去。

预期行为：不要在我的菜单项上显示工具提示！

*我不想要的是开始以编程方式更改工具提示状态或 disableHover，我保持足够的状态，并且对它不感兴趣。

标签： reactjsmaterial-ui

增加菜单弹出框root z-index，使其高于工具提示z-index

const useStyles = makeStyles({
  customMenu: {
    // !important is applied because the default z-index is applied inline
    zIndex: "1501 !important"
  }
});

<Tooltip open={true} title="Sample Tooltip Title" arrow>
  <TextField
    label="ML Features"
    variant="outlined"
    margin="dense"
    select
    multiple
    fullWidth
    SelectProps={{
      MenuProps: {
        PopoverClasses: {
          root: classes.customMenu
        }
      }
    }}
  >
    <MenuItem value="foo">Foo</MenuItem>
    <MenuItem value="bar">Bar</MenuItem>
  </TextField>
</Tooltip>

reactjs - 禁用或隐藏工具提示而不管理提示状态（材料 UI）

问题描述

解决方案

推荐阅读