MUI下一个工具提示没有在悬停上显示

Question

i使用材料 - uiv1.0.0.0-beta.34带有复选框和formControllabel的工具提示，实际上，当我在一个情况下悬停在复选框上的标签上时，工具提示在我的另一只手中按预期显示，我使用FormControllabel和Ceptbox创建一个新的One组件(自定义(，看起来工具提示无法正常工作。

https://codesandbox.io/s/n33p76n28p

Answer 1

如果将Checkbox包装在div中，则Tooltip将正常工作：

<Tooltip title="This tooltip works great">
  <div>
    <Checkbox label="This tooltip works on both text and checkbox." />
  </div>
</Tooltip>
<Tooltip title="This tooltip does not work">
  <Checkbox label="This tooltip does not work hovering on text, only hovering on checkbox." />
</Tooltip> 

原因

Tooltip组件通过响应其儿童组件上的事件(onMouseEnter，onMouseLeave和其他几个(来起作用。它通过向顶级儿童应用道具来注册这些事件。

当您将Checkbox包装在div中时，div接收onMouseEnter和onMouseLeave支柱，因此悬停工作正常。

但是，当您没有包装div时，您的自定义Checkbox将作为其props的一部分接收onMouseOver和onMouseLeave。您将这些 props散布到 MuiCheckbox中，就像这样：

<FormControlLabel
  control={<MuiCheckbox {...props} />}
  label={label ? label : ""}
/>

因此，您仅对MUICheckbox本身有效地将onMouseOver和onMouseLeave应用于标签。因此，悬停只能在Checkbox上工作，而不在标签上。

如果您愿意，也可以通过在整个自定义组件中扩散道具来解决此问题：

export const Checkbox = ({ error, helperText, ...props }) => {
  // Capture all of the other props in other
  let { disabled, label, ...other } = props;
  let icon;
  if (disabled) icon = <Info color="disabled" />;
  else if (error) icon = <Warning color="error" />;
  // Spread the other props throughout the top-level div
  return (
    <div {...other}>
      <div>
        <FormControlLabel
          control={<MuiCheckbox {...props} />}
          label={label ? label : ""}
        />
        {!!helperText && (
          <FormHelperText error={error} disabled={disabled}>
            {!!icon && icon}
            {helperText}
          </FormHelperText>
        )}
      </div>
    </div>
  );
};

我最初没有建议解决方案，因为如果您不小心，它可以更改组件的逻辑，而包装div应该非常安全。

Answer 2

如果有人好奇，@julesdupont提出的这个解决方案也适用于gatsbyimage：

<IconTooltip TransitionComponent={Fade} title={interest.text}>
                <div>
                  <GatsbyImage
                    image={interest.image.asset.gatsbyImageData}
                    alt={interest.alttext}
                  />
                </div>
              </IconTooltip>

Answer 3

如果您在对话框或纸上的顶部使用工具提示。也许来自z索引的原因。希望这对您的调试有帮助。