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

Question

我想使用TextField的 Outlined 样式，其标签必须包含带有一些文本的工具提示图标

请参考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 中的原因。

以下面显示的方式更改此设置确实允许工具提示起作用，但您不应该这样做。这会导致标签可点击。当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