TextInput标签内的工具提示不起作用。 Material-UI + React

Question

我想使用TextField的轮廓样式，其标签必须包含带有某些文本的tooltip图标

请参考Sandbox进行现场演示

代码摘录：

const IconWithTooltip = () => (
  <Tooltip title="Text explaining stuff">
    <HelpIcon />
  </Tooltip>
);

const Example = () => {
  return (
    <div>
      <FormControl variant="outlined">
        <InputLabel htmlFor="with-label">
          FormControl with label
          <IconWithTooltip />
        </InputLabel>
        <OutlinedInput
          id="with-label"
          startAdornment={<InputAdornment position="start">$</InputAdornment>}
        />
      </FormControl>
      <TextField
        label={
          <div>
            TextFiled
            <IconWithTooltip />
          </div>
        }
        variant="outlined"
      />
      Just icon with tooltop
      <IconWithTooltip />
    </div>
  );
};

问题：将鼠标悬停在（？）图标工具提示上不会出现。我尝试使用FormControl和TextInput以2种不同的方式对输入进行编码，但均无效果。我想念什么吗？

Answer 1

如Nimmi在评论中指出，这是由于pointer-events: none中的CSS for the label。

以下面所示的方式更改它确实可以使工具提示起作用，

但您不应该这样做。这将导致标签可点击。当pointer-events为none时，单击标签会进入输入并使其聚焦。当pointer-events为auto时，单击将停止在标签上，并且不会使输入成为焦点。

您可能希望利用帮助程序文本（在输入下方显示）作为合并工具提示的地方。

      <TextField
        InputLabelProps={{ style: { pointerEvents: "auto" } }}
        label={
          <div>
            TextFiled
            <IconWithTooltip />
          </div>
        }
        variant="outlined"
        type="text"
      />

相关文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events