Disable or Hide Tooltip without managing toottip state (Material UI)

问题

So I have text field with a a child select who in turn has a child menu like so:

<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>

My issus is that the first time the tooltip appears it is above the menu items and quite unpleasant like so:

I really only want the tooltip to dislpay when hovering over the text field itself but since the text field wraps the select and menu items it is activated there as well.

Solutions attempted: Whatever is here: Material-UI Tooltip zIndex over MenuItem in Select component Sadly this did not work, I also tried messing with the PopperProps but no go.

Expected Behavior: Do not display tooltip over my menu item!

*What I don't want is to start programmtically changing the tooltip state or disableHover, I am maintainig enough state as it is and am not interested in more of it.

回答1:

Increase the Menu Popover root z-index such that it is higher than the Tooltip 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>

来源：https://stackoverflow.com/questions/64317706/disable-or-hide-tooltip-without-managing-toottip-state-material-ui