MUI下一代工具提示在悬停时不显示

Question

我正在使用 Material-UI v1.0.0-beta.34 中的 Tooltip 和 Checkbox，实际上在一个情况下当我悬停在 Checkbox 标签上时，Tooltip 正常显示；另一方面，当我创建了一个包含 FormControlLabel 和 Checkbox 的自定义组件时，Tooltip 看起来并没有按预期工作。

https://codesandbox.io/s/n33p76n28p

- Palaniichuk Dmytro

Answer 1

如果您像这样将 Checkbox 包装在一个 div 中，Tooltip 将正常工作：

请返回：

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 等）来工作。它通过将 props 应用于顶级子项来注册这些事件。

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

但是，如果您没有包装 Checkbox，则您的自定义 Checkbox 会将 onMouseOver 和 onMouseLeave 作为其 props 的一部分接收。您可以像这样将这些 props 扩展到 MuiCheckbox：

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

因此，您实际上是只将 onMouseOver 和 onMouseLeave 应用于了 MUICheckbox 本身，而不是应用于标签。因此，悬停只对 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 应该是相当安全的。

- Jules Dupont

---

@PalaniichukDmytro 我已经扩展了我的答案，解释了为什么包装 div 可以解决你的问题。 - Jules Dupont

非常感谢，现在更清楚了，工具提示会将其属性传递给子元素。 - Palaniichuk Dmytro

救命稻草 @Jules Dupont - Shubham Yadav

这会破坏工具提示的位置。 - evanjmg

这会搞乱工具提示的位置。 - undefined

Answer 2

如果有人感兴趣，@JulesDupont 提出的这个解决方案也适用于 GatsbyImage：

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

- Rishfilet

Answer 3

如果您在对话框或纸张上使用工具提示，原因可能是 Z-index。希望这对您的调试有所帮助。

- Thanh Nhật